1. Horizontal centering:
(1). The horizontal centering of inline elements?
If the set element is an inline element such as text, image, etc. , set text-align:center in the parent element to center the inline element horizontally, and set the display of the child element to inline-block , so that the child element becomes an inline element
<div class="parent" style=""> <div class="child" style="">DEMO</div> </div>
<style>
.parent{text-align: center;}
.child{display: inline-block;}
</style>
(2) Horizontal centering of block elements (fixed width)
Text-align: center does not work when the element being set is a fixed-width block-level element . Centering can be achieved by setting the "left and right margin" value to "auto".
<div class="parent" style=""> <div class="child" style="">DEMO</div> </div>
.child{
width: 200px;
margin: 0 auto;
}
(3) Horizontal centering of block elements (indefinite width)
In actual work, we will encounter the need to set centering for "block-level elements of variable width", such as pagination navigation on web pages, because the number of pagination is indeterminate, so we cannot limit its flexibility by setting the width.
You can directly set text-align: center to block-level elements of variable width to achieve the effect, or you can add text-align: center to the parent element to achieve the centering effect.
When the width of variable-width block-level elements does not occupy a line, you can set display to inline type or inline-block (set to inline element display or inline block element)
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
Second, vertical centering:
The same as horizontal centering, here we want to talk about vertical centering, first set two conditions, that is, the parent element is a box container and the height has been set
Scenario 1: The child element is an inline element, and the height is stretched by its content
In this case, you need to vertically center the child element by setting the parent element's line-height to its height
<div class="wrap line-height">
<span class="span">111111</span>
</div>
.wrap{
width:200px ;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span{
background: red;
}
Scenario 2: The child element is a block-level element but the height of the child element is not set. In this case, the height of the child element is actually unknown and cannot be adjusted by calculating the padding or margin, but there are still some solutions.
Solved by setting display:table-cell;vertical-align:middle to the parent element
<div class="wrap">
<div class="non-height ">11111</div>
</div>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
display: table-cell;
vertical-align: middle;
}
.non-height{
background: green;
}
result
Scenario 3: The child element is a block-level element and the height has been set
Calculate the margin-top or margin-bottom of the child element, the calculation method is parent(element height - child element height)/2
<div class="wrap ">
<div class="div1">111111</div>
</div>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
}
.div1{
width:100px ;
height: 100px;
margin-top: 100px;
background: darkblue;
}
result
3. Centering horizontally and vertically:
3.1 Horizontal alignment + line height
text-align + line-height achieves horizontal and vertical centering of a single line of text
<style>
.test{
text-align: center;
line-height: 100px;
}
</style>
<div class="test" style="width: 200px;">测试文字</div>
3.2 Horizontal + Vertical Alignment
1. text-align + vertical-align Set text-align and vertical-align on the parent element, set the parent element as a table-cell element, and set the child element as an inline-block element
<style>
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
</style>
<div class="parent" style=" width:200px; height:100px;"> <div class="child" style="">测试文字</div> </div>
2. If the child element is an image , instead of using table-cell, the parent element uses the row height instead of the height, and the font size is set to 0. The child element itself sets vertical-align:middle
<div class="parent" style=" width:200px; "> <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test"> </div>
<style>
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
3.3 Relative + absolute positioning
Use absolute, use the box model feature of the absolutely positioned element , and set margin:auto on the basis of the offset attribute being a certain value
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 80px;
margin: auto;
}
</style>
<div class="parent" style=" width:200px; height:100px; "> <div class="child" style="">测试文字</div> </div>
From http://www.cnblogs.com/chaixiaozhi/p/8490725.html
(1). The horizontal centering of inline elements?
If the set element is an inline element such as text, image, etc. , set text-align:center in the parent element to center the inline element horizontally, and set the display of the child element to inline-block , so that the child element becomes an inline element
<div class="parent" style=""> <div class="child" style="">DEMO</div> </div>
<style>
.parent{text-align: center;}
.child{display: inline-block;}
</style>
(2) Horizontal centering of block elements (fixed width)
Text-align: center does not work when the element being set is a fixed-width block-level element . Centering can be achieved by setting the "left and right margin" value to "auto".
<div class="parent" style=""> <div class="child" style="">DEMO</div> </div>
.child{
width: 200px;
margin: 0 auto;
}
(3) Horizontal centering of block elements (indefinite width)
In actual work, we will encounter the need to set centering for "block-level elements of variable width", such as pagination navigation on web pages, because the number of pagination is indeterminate, so we cannot limit its flexibility by setting the width.
You can directly set text-align: center to block-level elements of variable width to achieve the effect, or you can add text-align: center to the parent element to achieve the centering effect.
When the width of variable-width block-level elements does not occupy a line, you can set display to inline type or inline-block (set to inline element display or inline block element)
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
Second, vertical centering:
The same as horizontal centering, here we want to talk about vertical centering, first set two conditions, that is, the parent element is a box container and the height has been set
Scenario 1: The child element is an inline element, and the height is stretched by its content
In this case, you need to vertically center the child element by setting the parent element's line-height to its height
<div class="wrap line-height">
<span class="span">111111</span>
</div>
.wrap{
width:200px ;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span{
background: red;
}
Scenario 2: The child element is a block-level element but the height of the child element is not set. In this case, the height of the child element is actually unknown and cannot be adjusted by calculating the padding or margin, but there are still some solutions.
Solved by setting display:table-cell;vertical-align:middle to the parent element
<div class="wrap">
<div class="non-height ">11111</div>
</div>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
display: table-cell;
vertical-align: middle;
}
.non-height{
background: green;
}
result
Scenario 3: The child element is a block-level element and the height has been set
Calculate the margin-top or margin-bottom of the child element, the calculation method is parent(element height - child element height)/2
<div class="wrap ">
<div class="div1">111111</div>
</div>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
}
.div1{
width:100px ;
height: 100px;
margin-top: 100px;
background: darkblue;
}
result
3. Centering horizontally and vertically:
3.1 Horizontal alignment + line height
text-align + line-height achieves horizontal and vertical centering of a single line of text
<style>
.test{
text-align: center;
line-height: 100px;
}
</style>
<div class="test" style="width: 200px;">测试文字</div>
3.2 Horizontal + Vertical Alignment
1. text-align + vertical-align Set text-align and vertical-align on the parent element, set the parent element as a table-cell element, and set the child element as an inline-block element
<style>
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
</style>
<div class="parent" style=" width:200px; height:100px;"> <div class="child" style="">测试文字</div> </div>
2. If the child element is an image , instead of using table-cell, the parent element uses the row height instead of the height, and the font size is set to 0. The child element itself sets vertical-align:middle
<div class="parent" style=" width:200px; "> <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test"> </div>
<style>
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
3.3 Relative + absolute positioning
Use absolute, use the box model feature of the absolutely positioned element , and set margin:auto on the basis of the offset attribute being a certain value
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 80px;
margin: auto;
}
</style>
<div class="parent" style=" width:200px; height:100px; "> <div class="child" style="">测试文字</div> </div>
From http://www.cnblogs.com/chaixiaozhi/p/8490725.html