CSS horizontal and vertical centering Common Methods

1, the element is centered horizontally

Of course, the best are:

margin: 0 auto;

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, the difference between the elements and block elements within the line and how to convert inline elements block elements see my other article!
Example 1:

<div class = " Box " > 
    <div class = " Content " > 
        wow! Centering the
     </ div> 
</ div> 

<style type = " text / CSS " > 
.box { 
    background - Color: # FF8C00; 
    width: 300px by; 
    height: 300px by;    margin:
  0 Auto; 
} 
.content { 
    background - Color : # F00 of; 
    width: 100px; 
    height: 100px;    Line
  -height: 100px; // vertically centered within the text block
    text-align: center; // Text Center 
    margin: 0 Auto; 
}
 </ style>

2 , the horizontal and 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

<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%);
}

Program 3: flex layout: the parent element plus

display: flex;
justify-content: center;
align-items: center;

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

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;　　　　　　　　//flex布局
    justify-content: center;　　//使子项目水平居中
    align-items: center;　　　　//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

方案4：table-cell布局
示例 5：
因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用

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

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

CSS horizontal and vertical centering Common Methods

Guess you like