CSS horizontal and vertical centering Common Methods (rpm)

Inline elements:

Parent element is block-level elements: parent element arranged text-align: center

 

 

1. element is centered horizontally

margin: 0 Auto; Who center, who set

Centered so bad reasons: 
1, the element is not set width, no width how centered thing! 
2, set the width still does not help, you set are inline elements right

Example 1:

<div class="box">
    <div class="content">
        哇！居中了
    </div>
</div>

<style type="text/css">
.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
.content {
    background-color: #F00;
    width: 100px ; 
    height : 100px ; 
    Line-height : 100px ; // text centered vertically within a block 
    text-align = left : Center ; // Text Center 
    margin : 0 Auto ; 
} 
</ style >

2. Horizontal Vertical centering element

Scheme 1: position element width known 
parent element is set to: position: relative; 
child element set to: position: absolute; 
from 50% to 50% according to the left, and then subtracting the distance of the width of the element itself can be achieved 
Example 2:

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

Scheme 2: position transform element width is unknown 
if the width of the unknown element, just above example margin: -50px 0 0 -50px; Replace: Transform: Translate (-50%, - 50%); 
the effect of the above! 
Example 3:

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Scheme 3: flex layout 
Example 4:

< Div class = "Box" > 
    < div class = "Content" > 
    </ div > 
</ div > 

.box { 
    background-Color: # FF8C00; 
    width: 300px by; 
    height: 300px by; 
    the display: Flex; // the layout Flex 
    justify-content: center; // make sub centered horizontally 
    align-items: center; // make sub vertically centered 
} 
.content { 
    background-Color: # F00 of; 
    width: 100px; 
    height: 100px; 
}

Scheme. 4: table-cell layout 
Example 5: 
Because the table-cell table comparable td, td elements within a row, width and height can not be set, so that a layer of nested, nested layer must be set to display: inline-block; td covered orange background, is not recommended

< Div class = "Box" > 
    < div class = "Content" > 
        < div class = "Inner" > 
        </ div > 
    </ div > 
</ div > 

.box { 
    background-Color: # FF8C00; // orange 
    width: 300px by; 
    height: 300px by; 
    the display: Table; 
} 
.content { 
    background-Color: # F00 of; // red 
    the display: Table-Cell; 
    vertical-align = left: Middle; // child element of the vertical center 
    text-align: center ; // child element is centered horizontally 
} 
.inner { 
    background-Color:# 000; // black 
    the display:inline-block;
    width: 20%;
    height: 20%;
}

Turn: https://blog.csdn.net/qq_27576607/article/details/78697812

https://www.jianshu.com/p/c78fa42e6e78