水平、垂直居中
1. 水平居中
(1)块级元素
对块元素进行水平居中:
使用margin,设置 左右外边距为auto ;
注意:块级盒子必须指定了宽度
代码演示:
<style>
div {
width: 200px;
height: 100px;
background-color: palegoldenrod;
margin: 0 auto;
}
</style>
<body>
<div>hi!!!</div>
</body>
显示效果:
(2)行内块、行内元素
行内或者行内块元素水平居中:
给 父元素 添加 text-align:center 属性
代码编写:
<style>
div {
width: 200px;
height: 100px;
background-color: palegoldenrod;
text-align: center;
}
</style>
<body>
<div>
<span>hello,java</span>
<input type="text">
</div>
</body>
显示效果:
2、垂直居中
(1)单行文字垂直居中:
line-height = height(height为盒子的高度)
示例展示:
/**html代码**/
<parent>
<child>I am child</child>
</parent>
/**css样式**/
parent {
width: 100px;
height: 100px;
display: block;
background-color: cadetblue;
}
child {
line-height: 100px;
}
显示效果:
(2)使用table、table-cell进行垂直居中
/**html代码**/
<parent>
<child>I am child</child>
</parent>
/**css样式**/
parent {
display: table;
background-color: burlywood;
height: 100px;
width: 200px;
}
child {
display: table-cell;
vertical-align: middle;
}
显示效果:
(3)使用flex进行垂直居中
/**html代码**/
<parent>
<child>I am child</child>
</parent>
/**css样式**/
parent {
display: flex;
align-items: center;
background-color: aquamarine;
height: 100px;
width: 200px;
}
显示效果:
(4)使用relative、transform进行垂直居中
/**html代码**/
<parent>
<child>I am child</child>
</parent>
/**css样式**/
parent {
position: relative;
display: block;
width: 200px;
height: 100px;
background-color: brown;
}
child {
position: absolute;
top: 50%;
transform: translateY(-50%); /*向上移动自身高度的一半*/
}
显示效果: