Div+CSS实现布局水平居中
2021-05-10 本文已影响0人
南湘嘉荣
CSS为网页设计带来了全新的布局方法。
而div标签是CSS布局的主力元素，其优势非常明显，相对于表格布局，div更加灵活。
div标签就是没有任何特性的容器，属于块状元素。
通常使用html布局表格布局页面时。只要设置布局表格的align属性为center就可以实现水平居中的效果了，但是div没有数据属性可以设置，只能通过CSS控制。
实现div水平居中的方法有很多，常用的方法是用CSS设置div的左右边距，即margin-left属性、margin-right属性。
当设置div左右外边距的值为auto，即自动时，左右外边距将相等，这样就达到了div水平居中的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div布局水平居中</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#align {
width: 75%;
height: 200px;
background-color: #999999;
border: 1px solid #000;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="align">
这是div块，水平居中效果
</div>
</body>
</html>
