CSS layout-center, css layout

CSS layout-center, css layout

Reference Article 1. CSS layout odd sex techniques-various Center 2. http://www.imooc.com/article/2235

1. Horizontally centered text-align: center
Horizontally center the image, button, text, and other in-row elements (display is inline or inline-block). You can use text-align: center for the element or parent element.

2. horizontal center of fixed width block-level elements margin: 0 auto;

. Container {width: 500px;/* set the element width */height: 200px; margin: 0 auto;/* Set margin-left and margin-right to auto */background-color: aquamarine ;}

3. Use table vertical and horizontal center

If you are using a table, you don't have to worry about various center problems at all. You only need to use td (or th) the align = "center" and valign = "middle" attributes of the element can perfectly solve the horizontal and vertical center problems of the content in it, by default, the content in the table is vertically centered. To control the center of table content in css, use vertical-align: middle for vertical center. As for horizontal center, it seems that css has no corresponding attribute, however, in IE6 and 7, we can use text-align: center to horizontally center the elements in the table. IE8 + and text-align of browsers such as Google and Firefox: center only applies to row elements. It does not apply to block elements. You need to set display.

<! DOCTYPE html> 
4. Use display: table; margin: 0 auto; horizontally centered
 .child{          display: table;          width: 100px;          height: 100px;          margin:0 auto;          background-color: deeppink;      }
5. Use display: table-cell to vertically and horizontally Center
For elements that are not tables, we can simulate them into a table cell through display: table-cell, so that we can use the table center feature. However, this method can only be used in IE8 +, Google, Firefox, and other browsers. IE6 and IE7 are ineffective.
<! DOCTYPE html> 
Effect:

6. Vertical center of single or multi-line text
When the parent element height is determined,
Set the height of the parent element to be consistent with that of line-height for a single line of text;
When vertical-align: middle is used for multi-line text, you need to set line-height or display: table-cell because the alignment baseline uses the baseline with the row height as the mark;
7. Absolute positioning vertical and horizontal center
This method applies only to elements that we already know their width or height.
The principle of absolute positioning to center is to set the left or top attribute of the absolute positioning element to 50%. At this time, the element is not centered, instead, it is half the width or height of the element to the right or left of the center position, therefore, we need to use a negative value of margin-left or margin-top to pull it back to the center position. The negative value of margin is half the width or height of the element.
Vertical and horizontal center
. Parent {position: relative;/* relative location of the parent element */width: 500px; height: 300px; background-color: pink ;}. child {position: absolute; left: 50%; top: 50%; width: 300px; height: 200px; margin:-100px 0 0 0-150px; /* margin-left is half the child width, and margin-top is half the child height */background-color: deeppink ;}
8. Another type of absolute positioning Center
This method also applies only to elements that we already know their width or height, and unfortunately it only supports modern browsers that comply with w3c standards, such as IE9 +, Google, Firefox, etc.
. Parent {position: relative;/* relative location of the parent element */width: 500px; height: 300px; background-color: pink ;}. child {position: absolute; width: 300px;/* the width and height must be fixed */height: 200px; left: 0; right: 0; /* left and right must be paired to control the horizontal direction. The same applies to top and bottom */top: 0; bottom: 0; margin: auto, 0 auto horizontal center, auto 0 vertical center */background-color: deeppink ;}
9. flex layout vertical and horizontal center
For the flex layout syntax and examples, refer to Ruan Yifeng's blog: Flex layout Tutorial: syntax and Flex layout Tutorial: instance
.parent{            display:flex;            justify-content:center;            align-items:center;            width: 500px;            height:300px;            background-color: pink;        }.child{            width: 300px;            height: 200px;            background-color: deeppink;        }