1. In-line elements are vertically centered
Note: The width and height of inline elements cannot be set, but padding can be set, margin-top and margin-bottom can not be set, but margin-left and margin-right can be set.
1. Set padding-top and padding-bottom to the same value.
HTML
.box{
padding-top: 30px;
padding-bottom: 30px;
padding-right: 20px;
padding-left:20px;
background-color: #b9d1ee;
}
HTML
<span class="box">
使用padding-top和padding-bottom使文本垂直居中
</span>
2. The parent element sets the height and line-height values to be the same.
Principle: line-height = top spacing + text height + bottom spacing, and the height of the top spacing and the bottom spacing are the same. If line-height=height then the text will be vertically centered.
CSS：
.father{
width: 1200px;
height: 300px;
line-height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
text-align: center;
}
.child{
background-color: #b9d1ee;
}
HTML：
<p class="father">
<span class="child">
父元素设置line-height和height值相同。
</span>
</p>
Second, the block element is vertically centered
1. Flex layout
Set the parent element:display:flex;align-items:center;
CSS
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
display: flex;
align-items:center;
}
.child{
width: 200px;
height: 200px;
background-color: #b9d1ee;
}
HTML:
<div class="father">
<div class="child">
块元素垂直居中：flex布局
</div>
</div>
2. Grid layout:
Parent element settings: display: grid;grid-template-columns: 150px 150px ;grid-template-rows: 150px 150px;
child element settings:align-self:center;
CSS：
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
display: grid;
grid-template-columns: 150px 150px ;
grid-template-rows: 150px 150px;
}
.child{
width: 100px;
height: 100px;
text-align: center;
align-self:center;
}
.child:nth-child(1){
background-color: #b9d1ee;
}
.child:nth-child(2){
background-color: #95a9c4;
}
.child:nth-child(3){
background-color: #a7e99f;
}
.child:nth-child(4){
background-color: #6e9b66;
}
HTML：
<div class="father">
<div class="child">
块元素垂直居中：grid1
</div>
<div class=" child">
块元素垂直居中：grid2
</div>
<div class=" child">
块元素垂直居中：grid3
</div>
<div class=" child">
块元素垂直居中：grid4
</div>
</div>
3. Use positioning
(1) The height of the child element is determined
Relative positioning of parent elements, absolute positioning of child elements. The sub-element is provided top：50% ;margin-top:-（子元素高度的一半）px;as is the top height relative to the parent vessel, so it can be realized in half vertically centered Save subelement height.
CSS:
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
position: relative;
}
.child{
width: 1000px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
background-color: paleturquoise;
}
HTML：
<div class="father">
<div class="child">
利用定位，子元素的高度确定。
</div>
</div>
(2) The height of the child element is uncertain
Use of locating margin-top：-50pxinto transform: translateY(-50%);upward movement of the element itself 50%.
CSS：
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
position: relative;
}
.child{
width: 1000px;
position: absolute;
transform: translateY(-50%);
top: 50%;
background-color: paleturquoise;
}
HTML:
<div class="father">
<div class="child">
<p>利用定位，子元素的高度不需确定。</p>
<p>transform: translateY(-50%);</p>
</div>
</div>
(3) Determine the height of the child element
The left, right, bottom and top of the child elements are all 0, margin: auto
CSS
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
position: relative;
}
.child{
width: 1000px;
height: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background-color: paleturquoise;
}
HTML:
<div class="father">
<div class="child">
<p>利用定位，子元素的高度不需确定。</p>
<p>子元素的left、right、bottom、top都为0,margin:auto</p>
</div>
</div>
