水平居中布局
text-align&inline-block
在parent中设置text-align:center
在child中设置display:inlne-block
优缺点:
兼容性好,因为这两个属性都是css2中的内容,就是text-align具有继承性,有时会污染子元素css
三种display属性
-
block 块级元素
- 父级元素的text-align属性对行内元素无效
-
inline 行内元素
- 父级元素的text-align属性对行内元素有效
- 该元素的width和height会变得无效,变成根据该元素的内容自动调整大小,如果没有内容就看不到这个元素
-
inline-block 行内块级元素
- 拥有行内和块级元素的双重特点
- 父级元素的text-align属性对行内元素有效和该元素的width和height会变得有效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平居中</title>
<style type="text/css">
#parent{
width: 100%;
height: 200px;
background: #ccc;
text-align: center;
}
#child{
width: 200px;
height: 200px;
background: #c9394a;
display: inline-block;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平居中
</div>
</div>
</body>
</html>
text-align具有继承性,parent中child的内容也会水平居中,如果想要让child中的内容左对齐,可以对child添加text-align:left,覆盖属性。
table|block&margin
在child中设置display:table或block margin:0 auto
- table是css的内容,相对设置block较兼容
- div等block元素可以不用重复设置
优缺点
- 只需要对child元素设置样式就可以实现效果
- 如果child脱离文档流的话,会导致margin属性无效(child设置position: absolute|fixed;)
margin补课
margin属性代表外边距:
- 一个值: 上下左右四个的边距
- 两个值: 第一个表示上下边距 第二个表示左右边距
- 0 auto 表示上下边距为0 左右边距根据浏览器自动分配
- 三个值:第一个表示上,第二个表示左右,第三个表示下
- 四个值:上右下左
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平居中</title>
<style type="text/css">
#parent{
width: 100%;
height: 200px;
background: #ccc;
}
#child{
width: 200px;
height: 200px;
background: #c9394a;
display: block;
margin:0 auto;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平居中
</div>
</div>
</body>
</html>
absolute&left&transform
parent和child都加上position:absolute
child设置left:50%
child再向左平移自己宽度的一半 transfrom:translatex(-50%)
优缺点
parent脱离文档流,不影响子级元素的水平居中效果;但是transfrom属于css3中的属性,老浏览器不支持。
position补课:
- static:默认不开启
- absolute:绝对定位
- 如果父级元素没有开启定位,这个绝对定位是以浏览器页面为定位的
- 如果父级元素开启定位,这个绝对定位是相对父级元素为定位的
- fixed:相对定位
- relative:相对定位
transfrom补课:
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平居中</title>
<style type="text/css">
#parent{
width: 100%;
height: 200px;
background: #ccc;
position: absolute;
}
#child{
width: 200px;
height: 200px;
background: #c9394a;
position: absolute;
left: 50%;
transform: translateX(-50%)
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平居中
</div>
</div>
</body>
</html>
垂直居中布局
table-cell&vertical-align
parent设置display:table-cell 和 vertical-align:middle
优缺点
兼用性好,vertical-align会污染子元素样式
display再补课
- table:设置当前元素为table元素(表格)
- table-cell:设置当前元素为td元素(单元格)
- 注意设置了table-cell后,如果父元素没有确切的宽度,width:100%会失效
vertical-align补课
- top middle bottom
- 用于单元格等元素的设置内容垂直方向的对齐方式
这种方法就相当于把parent设置成一个单元格,来设置垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中布局</title>
<style type="text/css">
#parent {
width: 200px;
height: 600px;
background: #ccc;
display: table-cell;
vertical-align: middle;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平居中
</div>
</div>
</body>
</html>
height:100%补课
如果你要是设置宽度为width: 100%;,那这个元素的宽度会立刻扩展到窗口的整个横向宽度,
但是如果你设置高度为height:100%,那么这元素的高度不会立即扩展到整个窗口的高度,
原因是浏览器不会计算页面高度。
当你设置height:100%,如果父级元素是body是无效的,如果父级元素是其他元素,该元素会撑满整个父元素的高度。
absolute&top&transfrom
parent和child都设置absolute
child设置top:50 transfrom:translateY(-50%)
优缺点
parent是否脱离文档流,不影响子级元素的水平居中效果;但是transfrom属于css3中的属性,老浏览器不支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中布局</title>
<style type="text/css">
#parent {
width: 200px;
height: 600px;
background: #ccc;
position: absolute;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平居中
</div>
</div>
</body>
</html>
水平垂直居中布局
vertical-align&text-align
对parent设置:display:table-cell , vertical-align:middle , text-align:center
对child设置:display:inline-block
优缺点:
兼容性好,但是设置了table-cell后,width:100%会失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style type="text/css">
#parent{
width: 1000px;
height: 600px;
background-color: #CCCCCC;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#child{
width: 200px;
height: 200px;
background-color: #C9394A;
display: inline-block;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平垂直居中
</div>
</div>
</body>
</html>
absolute&transfrom
父子节点都加上 position:absolute
在child上加上 top:50% left:50 transfrom:translate(-50%,-50%)
优缺点
你懂的,就是兼用型不好,没啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style type="text/css">
#parent {
width: 100%;
height: 600px;
background-color: #CCCCCC;
position: absolute;
margin: ;
}
#child {
width: 200px;
height: 200px;
background-color: #C9394A;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平垂直居中
</div>
</div>
</body>
</html>