css和HTML布局小技巧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css和HTML布局小技巧相关的知识，希望对你有一定的参考价值。
一：水平居中
1. 如下所示，让child在parent中水平居中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .parent{ width:300px; height:200px; border:1px solid #000; text-align: center; } .child{ width: 50px; height:50px; border:1px solid red; display: inline-block;} </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
第一种方法：给父元素添加text-align：center属性，把子元素变成行内框，display：inline-block；（子元素可以是行内元素也可以是块级元素）
第二种方法：给子元素添加margin:0 auto;属性（子元素必须有宽度，而且必须是块级元素）；
第三种方法：利用绝对定位和相对定位实现
.parent{
width:300px;
height:200px;
border:1px solid #000;
position: relative;//设置相对定位以配合子元素的绝对定位
}
.child{
width: 50px;
height:50px;
border:1px solid red;
position: absolute;
left:50%;
margin-left: -25px;//元素宽度的一半
}
二，垂直居中
第一种方法：和上面一样利用绝对定位
.parent{
width:300px;
height:200px;
border:1px solid #000;
position: relative;//设置相对定位以配合子元素的绝对定位
}
.child{
width: 50px;
height:50px;
border:1px solid red;
position: absolute;
top:50%;
margin-top: -25px;
}
第二种方法：
给parent增加
display:table-cell;
vertical-align: middle;
以上是关于css和HTML布局小技巧的主要内容，如果未能解决你的问题，请参考以下文章