CSS Layout: Horizontal Vertical centering element
This article describes the implementation sequentially under different conditions horizontal and vertical centering of various methods
Horizontal and vertical centering is often used when writing web needs on two blog, we introduced the horizontal and vertical centering method. Horizontal and vertical center of this paper is a method centered horizontally and vertically centered before used together. Principles used are the same. After believe the means to acquire centered horizontally and vertically centered, will be able to summarize their own how to achieve horizontal and vertical centering
Tip: in said scene below apply only give you a few simple examples to facilitate understanding. The actual scenario is too complex, error-prone rote. The most important principle is to master a variety of methods to achieve centered. Once you master the principle, then no matter how the problem can become choose the appropriate method according to their own understanding.
First, using the text-algin and line-height
1. Principle
Using the center value of the attribute-algin text, to achieve horizontal centering.
Using the line-height attribute, it is equal to the height of the parent element, to achieve vertical centering
a combination of both horizontal and vertical centering achieve
2. Applicable scene
(1) typically may be provided on the line height for an element
3. Implementation steps
(1) Set the text horizontally centered on the parent element
text-algin:center;
(2) disposed on the sub-element to the parent element rows high altitude
line-height:100px;
4. The complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
text-align: center;/*设置水平居中*/
}
p{
line-height: 100px;/*设置行高等于父元素高度实现垂直居中*/
margin: 0;/*清除外边距的影响*/
}
</style>
</head>
<body>
<div class="box">
<p>水平垂直居中</p>
</div>
</body>
</html>Second, the use of the layout table
1. Principle
The elements into table type. Attribute using vertical-align vertically centered, then use sub-element horizontal margin ultimately centered vertically centered horizontal (vertical-algin centrally require a reference material, or can not achieve centering may be disposed directly in the table cell)
2. Applicable scene
(1) the width of the sub-elements
3. Implementation steps
(1) converting the parent element type table-cell
display:table-cell;
(2) parent element disposed vertical-align Vertical Centering
vertical-align:middle;
(3) sub-element setting margin property
margin:0 auto;
4. The complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 100px;
border: 1px solid #333;
display: table-cell;
vertical-align: middle;
}
.box .child {
width: 50px;
height: 50px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>Third, the use positioning
Method a: using fixed + margin
1. Principle
By providing vertical and horizontal positioning properties, and then up and down right and left margin to achieve auto centering
2. Applicable scene
(1) the size of the unknown element is centered in the browser
3. Implementation steps
(1) sub-element arranged fixed positioning (no change)
position: fixed;(2) a positioning sub-element value of the vertical and horizontal 0 (no change)
left: 0;
right: 0;
top: 0;
bottom: 0;
(3) sub-element setting margin
margin:auto;
4. The complete code
Example 1: unknown size elements in the horizontal visual browser window centered
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未知大小的元素在浏览器可视窗口中水平居中</title>
<style>
img{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/img13.jpg" alt="">
</div>
</body>
</html>
Example 2: element of known size in a horizontal visual browser window centered
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已知大小的元素在浏览器可视窗口中水平居中</title>
<style>
.box {
width: 100px;
height: 200px;
background: #f00;
position:fixed;
left: 50%;
top: 50%;
margin: -100px 0 0 -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Option two: relative + absolute
1. Principle
By positioning element disposed opposite the parent, child elements disposed absolute positioning. Using the top left value and moves the center value, then use the margin or transform adjusting the position of
the Tip: Note that the positioning element is an element of an edge or a corner as a reference rather than the center point of the reference element
for example: a single use, based on the border as a reference, is a combination of two corner as the reference point
(. 1) Top: in the border as a reference element, top: 50px; is from the upper border of the parent element of the element border 50px
(2) right: elemental Right as a reference frame, right: 50px; right border element is the parent element from the right border 50px
(. 3) left and top used in combination: in the upper left corner of the reference element, top: 50px; left: 50px ; represents the upper left corner element 50px border points from the parent element, parent element from the left border 50px;
(. 4) right and bottom combination: to lower-right corner of the reference element is, bottom: 50px; right: 50px; represents the distance of the lower right corner point of the parent element under 50px border element from the parent element's right border 50px;
(5) various other combinations Similarly, the properties of the two opposite directions can not be used in combination. For example, using both top and bottom to top prevail , bottom will fail. left and right; then will use to prevail left , right fail.
(6) positioned so that the top and left 50%, is a child or an angular movement to the border position of 50%, but also moved back half the length of the sub-elements themselves, to achieve true centering
2. Applicable scene
(1) centering elements of known size (margin attribute) in the parent element
(2) the size of the unknown element in the parent element is centered (Transform property, there are compatibility problems)
(3) centering the floating element
3. Implementation steps
(1) First set the relative positioning of the parent element relative (no change)
position: relative;
(2) the child element is set to absolute positioning absolute (relative to the parent sub absolute) (no change)
position:absolute;
(3) move to the right sub-elements, sub-elements move downwardly, half (50%) of a moving distance of the parent container
top:50%;
left: 50%;
tip: At this point in the upper left corner element of the center point of the parent element
(4) by half the length of the left and upward movement of the sub-elements so that the overall level of the middle sub-element.
/*margin实现*/
margin: -25px 0 0 -25px;
/*transform实现*/
transform: translate(-50%, -50%);
4. The complete code
Example 1: horizontal vertical centering elements of known size (margin attribute) in the parent element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已知大小元素在父元素中水平垂直居中</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid #333333;
position: relative;
}
.box .child {
width: 50px;
height: 50px;
background: #222222;
position: absolute;
top:50%;
left: 50%;
margin: -25px 0 0 -25px;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
Example 2: unknown size level element in the parent element vertically centered (Transform Properties)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid #333333;
position: relative;
}
.box .child {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">我是transform居中</div>
</div>
</body>
</html>
Fourth, elastic flex box layout
Method a: justify-content + align-items
1. Principle
Elastic cassette css3 artifact is a layout, and may change adaptively to achieve certain effects. Using flex layout, wherein justify-content is used to set or retrieve an elastic element in the spindle box (default about the horizontal axis) the alignment direction; and align-items attribute defines flex subkey in the current line side flex shaft vessel (default vertical longitudinal axis) the alignment direction. Not compatible with earlier versions of IE.
2. Applicable scene
(1) Size known centering elements
(2) of unknown size centering element
(3) simultaneously the plurality of centering elements
3. Implementation steps
(1) parent element the elastic open box
display:flex;
(2) the parent element to set the spindle center (entry into force of the sub-elements)
justify-content: center;
(3) the parent element centrally disposed side shaft (subelements force)
align-items: center;
4. The complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
height: 100px;
width: 200px;
border: 1px solid #222222;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<div class="child">flex居中</div>
</div>
</body>
</html>
Method two: flex / grid and margin: auto (simple wording)
1. Principle
Open box layout parent element or an elastic grid layout, then the child element with an automatic margin value to achieve centering (not compatible with the low version of IE)
2. Applicable scene
(1) Size centering unknown element
(2) it is known centering element size
3. Implementation steps
(1) open to the parent element or the elastic box layout grid layout
/*开启弹性盒子布局*/
display:flex;
/*开启网格布局*/
display:gird;
(2) sub-elements arranged for centered margin value
marign：auto;
4. The complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
height: 100px;
width: 200px;
border: 1px solid #222222;
/* display: flex; */
display: grid;
}
.child{
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child">flex或gird居中</div>
</div>
</body>
</html>