as follows:
<body>
<div class="outer">
<p>盒子</p>
</div>
</body>
Method 1 : Use absolute positioning and margin values to achieve horizontal and vertical centering of the div module
<style>
/* 去掉内外边距 */
*{
padding: 0;
margin: 0;
}
body{
background-color: #e84118;
}
/* 用法1 :使用绝对定位和margin值实现div模块的水平和垂直居中*/
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
/* 这是行内元素水平居中 */
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px -100px;
/* margin-left:-100px;
margin-top:-100px */
}
</style>
The experimental results are as follows:
Method 2 : Use absolute positioning, top: 50%; left: 50%; transform: translate(-50%,-50%); method. transform: translate(-50%,-50%); means to move to the left and up by 50% of its own length and width, which is the same as method 1, using margin.
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
/* 这是行内元素水平居中 */
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%);的意思是，往左，上移动自身长宽的50% */
transform: translate(-50%,-50%);
}
Method 3 : Use absolute positioning, margin: auto; and top, left, right, bottom values are equal, and the values need to be equal to achieve.
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
line-height: 200px;
/* 上面的元素不做改变 */
position: absolute;
margin: auto;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
Method 4 : Use absolute positioning and calc operation. Similar to method one.
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
text-align: center;
line-height: 200px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);/*calc，获取父级元素的50%，然后减去自身的一般px值，就可以实现*/
left: calc(50% - 100px);
}
Method 5 : Convert the child element to an inline element, use line-hight: its own height in the parent element; realize vertical centering, and use text-align: center; in the parent element to realize horizontal centering.
<body>
<div class="outer">
<div class="inner">
<p>盒子</p>
</div>
</div>
</body>
<style>
/* 去掉内外边距 */
*{
padding: 0;
margin: 0;
}
body{
background-color: #e84118;
}
/* 用法1 :使用绝对定位和margin值实现div模块的水平和垂直居中*/
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
text-align: center;
line-height: 200px;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
display: inline-block;
}
</style>
The results are as follows:
Method 6 : This method is not commonly used, but it can deepen the understanding of vertical-align.
vertical-align performs centering or top-level operations based on inline elements. W3C: This property defines the vertical alignment of the baseline of an inline element relative to the baseline of the line in which the element resides.
<body>
<div class="outer">
<div class="inner">
234234
<!-- <p>盒子</p> -->
</div>
<div class="help"></div>
</div>
</body>
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
text-align: center;
/* line-height: 200px; */
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
/*由于高度100%将会将原有行的高度撑开，使得行的高度发生改变，进而inner使用vertical-align:middle;的时候生效了。*/
.help{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
Method 7 : flex layout! More convenient and commonly used.
Flex layout, recommended: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display: flex;
justify-content: center;
align-items: center; Just write these three lines of code in the parent element.
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: flex;
justify-content: center;
align-items: center;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
}
It can also be as follows: use margin: 0 auto; and align-self: center; in flex items to achieve layout.
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: flex;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
margin: 0 auto;
align-self: center;
}
Method 8 : Use grid layout, which is also relatively simple.
The attributes of the grid layout are divided into two categories, one is defined on the container, called the container attribute; the other is defined on the item, called the item attribute. This section first introduces container properties.
Grid layout, recommended: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
.outer{
width: 200px;
height: 200px;
background-color: wheat;
border: 2px solid black;
border-radius: 20px;
/* 上面的元素不做改变 */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
display: grid;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
border-radius: 10px;
text-align: center;
line-height: 100px;
align-self: center;/*垂直*/
justify-self: center;/*水平*/
}
Talk is cheap, show me the code! ——Xinhuo Studio