北京中科高效抗白个性施术 https://baidianfeng.39.net/a_wh/221123/12429279.html布局（layout）即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。网页布局对改善网站的外观非常重要，又称版式布局。常见的布局结构分为：单列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。居中水平居中1.text-align:center.parent{width:px;height:px;border:1pxsolid#ddd;text-align:center;}.child{display:inline-block;width:px;}divclass=parentspanclass=child/span/div该方法可以水平居中块级元素中的行内元素，如`inline`，`inline-block`；对于块级元素中的块级元素，只会让子元素中的内容居中，子元素仍然是左对齐，如上述例子中span改成`display：block`，则child会左对齐，其中的文字会相对于span居中。2.margin:0auto.parent{width:px;height:px;border:1pxsolid#ddd;}.child{display:block;margin:0auto;width:px;}divclass=parentspanclass=child/span/div对于已知width的块级元素，可以用`margin：0auto`来设置水平居中。垂直居中1.line-height对于已知height的单行文本，设置line-height=height的值，即可实现垂直居中。2.vertical-align:middle模拟成表格属性来实现居中。.parent{display:table-cell;//模拟表格属性vertical-align:middle;text-align:center;width:px;height:px;border:1pxsolid#ddd;}.child{display:inline-block;width:px;}divclass=parentspanclass=child/span/div3.position：absolute+translate对于height和width未知的元素可以采用该方法.parent{position:relative;width:px;height:px;border:1pxsolid#ddd;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ddd;}divclass=parentspanclass=childbrbr/span/div4.flex布局对于多个元素可以采用该布局方案，这应该是目前为止用的最省心顺手的方案了吧，这个可以参考阮一峰老师的文章（
转载请注明：http://www.aierlanlan.com/tzrz/7132.html
