div水平居中的两种方式

文章目录

div水平居中的两种方式
- 1、使用margin：0px auto;
- 2、使用calc自动计算margin-left实现水平居中

1、使用margin：0px auto;

<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div水平居中</title><style>div{width: 500px;height: 500px;background-color: aqua;margin: 0px auto;/*实现水平居中*/}</style>
</head>
<body><div></div>
</body>
</html>

2、使用calc自动计算margin-left实现水平居中

<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div水平居中</title><style>div{width: 500px;height: 500px;background-color: aqua;margin-left: calc(100% / 2 - 500px / 2);/*实现水平居中*/}</style>
</head>
<body><div></div>
</body>
</html>

div水平居中的两种方式相关推荐

div水平居中的两种方法
两种方法都不需要指定div的宽度,兼容性也较好. 1. 设置position为relative .center { position:relative; text-align:center; } 2. ...
jquery 动态添加div元素（两种方式）
方法一: var creatediv= function(){var parentdiv=$('<div></div>'); //创建一个父divparentdiv.attr( ...
CSS 绝对定位 div 水平居中（两种）
html <div class="test-div"></div> css 1. 确定宽度 .test-div {display: inline-block ...
angularjs通过ng-change和watch两种方式实现对表单输入改变的监控
angularjs通过ng-change和watch两种方式实现对表单输入改变的监控直接上练习代码 <!DOCTYPE html> <html xmlns="http:/ ...
Struts2-表单验证的两种方式
1. Struts2中的输入校验 2. 编码方式校验 1) Action一定要继承自ActionSupport 2) 针对某个要进行校验的请求处理方法编写一个 public void vali ...
页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
springmvc和servlet在上传和下载文件（保持文件夹和存储数据库Blob两种方式）
参与该项目的文件上传和下载.一旦struts2下完成,今天springmvc再来一遍.发现springmvc特别好包,基本上不具备的几行代码即可完成,下面的代码贴: FileUpAndDown.jsp ...
跨页数据传递的两种方式
选择具有PostBackUrl属性的三个控件Button.LinkButton.ImageButton.PostBackUrl属性的值就是投递的页面URL. 要在接收页面按对象的方式接收投递页面的表单 ...

div水平居中的两种方式

div水平居中的两种方式

文章目录

1、使用margin：0px auto;

2、使用calc自动计算margin-left实现水平居中

div水平居中的两种方式相关推荐

最新文章

热门文章