Interpretation of horizontal and vertical centering of CSS layout

Summary: flexbox is a very powerful layout module. The three properties are settled, and the width and height of the parent container and the center element can be variable.

Horizontal centering

align="center"

directly adds align="center" to the label object to make The image inside the object is displayed horizontally and horizontally in

the center. How to use align="center":

<div align="center">aaa</div>
Click and drag to move
text-align:center

<style> .divcss5{text-align:center } </style> <div class="divcss5">aaa</div>

Click and drag to move
text-align is set for the parent element, only inline elements such as pictures, buttons, text (display is inline or inline-block, etc.) work, the first condition to work is that the child elements must not be affected by float. But it should be noted that in the two wonderful browsers IE6 and 7, it can center any element horizontally. Setting

the margin to auto

is to set the margin-left and margin-right of the element to be centered. All are set to auto, this method can only be centered horizontally, and is invalid for floating elements or absolutely positioned elements

<style> body{ text-align:center} .div{ margin:0 auto;} </style> <div class ="div"






As long as the table uses the align="center" and valign="middle" attributes of the td (or th) element, it can be handled perfectly, and the table defaults to the vertical centering of its content. To control the centering of table content in CSS, you can use vertical-align: middle. As for horizontal centering, there is no corresponding attribute in CSS, but in IE6 and 7, you can use text-align: center to set the elements in the table, IE8+ And the text-align:center of Google, Firefox, etc. only works on inline elements, and is invalid for block elements.

For not tables, you can use display:table-cell to simulate a table cell, so that you can use the table very well. Convenient centering feature with

<div style="display:table-cell;width:200px;height:200px;border:1px solid #ccc;"> <div>aaa</div> </div>
click and drag to Move
Use absolute positioning for centering

This method only works for elements whose width or height we already know.

The principle of absolute positioning for centering is to set the left attribute of the absolute positioning element to 50%. At this time, the element is not centered, but half of the width of the element is offset to the right. A negative margin-left needs to be used to place it. Pull back to the centered position, and the negative margin value will take half the width of the element. The advantage of

using this method is that no matter what form of content you have, it can be centered immediately, but the disadvantage is that the element must have a certain width and height value, otherwise If so, you may need to perform some small calculations through javascript.

<style> .child{width:100px;height:100px;position:absolute;left:50%;margin-left:-50px;} </style> <div class="parent"> <div class="child" >aaa</div> </div>
Click and drag to move
Use the box model to achieve horizontal centering -- padding fill

margin

absolute centering

<style> .Center {width:100px; margin: auto; position: absolute; top: 0 ; left: 0; bottom: 0; right: 0; } </style> <div class="Center">aaa</div>

Click and drag to move
Pros : Cross-browser support, including IE8-IE10. No other special markup is required, and the amount of CSS code is small. Percentage % property values ​​and min-/max-properties are supported. Centering any content block can be accomplished with just this one class. Centering can be done with or without padding (without using the box-sizing property). Content blocks can be redrawn. Perfect support for image centering.

Disadvantage: width must be declared. It is recommended to set overflow:auto to prevent content from overflowing out of bounds. Does not work on Windows Phone devices.

Use float with relative positioning for horizontal centering

<style> .parent{width:300px;height:200px;border:1px solid red;} .wrapper{float:left;position:relative;left:50%;clear:both;} .child{border:1px solid blue ;position:relative;left:-50%;white-spave:nowrap;} </style> <div class="parent"> <div class="wrapper"> <div class="child">aaa</div > </div> </div>

Click and drag to move
This is a solution to the horizontal centering of floating elements, and we do not need to know the width of the element.

The principle of floating centering is to position the floating element relatively to 50% of the width of the parent element After the place, the sub-elements in it need to use a relative positioning to pull back the extra half of its own width, and because the relative positioning is positioned relative to itself, the half of its own width only needs to be left or right. It can be obtained by setting it to 50%, so you don't need to know what the actual width is. The

advantage is that you don't need to know the width of the element to be centered, even if the width is constantly changing; the disadvantage is that an extra element is needed to wrap it to be centered The element of

using button tag

​​​​​​​Original

link http://click.aliyun.com/m/23929/