- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-25 10:21:45
CSS 对齐 - 水平 & 垂直对齐
元素居中对齐
要使一个元素水平居中对齐可以使用 margin: auto;来实现
设置元素的宽度将防止它溢出到容器的边缘
元素通过指定宽度，并将两边的空外边距平均分配
div{
width:100px;
margin:auto;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>元素居中对齐</div>点击 "运行实例" 按钮查看在线实例
效果图：
注意：如果没有设置 width 属性值(或者设置 100%)，居中对齐将不起作用
文本居中对齐
设置文本在元素内居中对齐，可以使用 text-align: center;
div{
width:100px;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}点击 "运行实例" 按钮查看在线实例
效果图：
使用 position 属性设置左和右对齐
我们可以使用 position: absolute; 属性来对齐元素
div{
position:absolute;
width:100px;
right:0;
padding: 20px;
border: 1px solid #ccc;
}点击 "运行实例" 按钮查看在线实例
效果图：
注意：绝对定位元素会被从正常流中删除，并且能够交叠元素
跨浏览器兼容性问题
当使用 position 来对齐元素时, 通常 <body>元素会设置 margin 和 padding，这样做的好处是可以避免在不同的浏览器中出现可见的差异
当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明
float属性设置左右齐
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候可以使用 "clearfix(清除浮动)" 来解决问题
.parent{
width:400px;
padding: 25px;
border: 1px solid #ccc;
}
.clearfix{
overflow: auto;
}
.child{
width:200px;
height: 100px;
border: 1px solid #444;
float: left;
}点击 "运行实例" 按钮查看在线实例
效果图：
注意：当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。所以当使用 float 属性时，请始终设置 !DOCTYPE 声明
水平垂直居中定位：
可以使用text-align: center，line-height来实现文本水平垂直居中
.parent{
width:450px;
height:300px;
background-color: pink;
text-align: center;
line-height: 300px;
font-size: 20px;
}点击 "运行实例" 按钮查看在线实例
效果图：
推荐手册