Horizontal vertical Centering Scheme

From simple to complex:

Horizontal centering of elements within rows

To center inline elements (<span>, <a>, and so on), simply wrap the inline elements in a block-level parent element (<div>, <li>, <p>, and so on), and set the following in the parent element CSS:

1 #container {2     text-align:center; 3}

and applies to text, links, and their inline or inline-block, inline-table, and Inline-flex.

Demo

Horizontal centering of blocky elements

To achieve the horizontal center of the Block Element (Display:block), we only need to set its left and right margins Margin-left and margin-right to auto to achieve the center of the block element, the block element to be horizontally centered CSS settings are as follows:

1 #center {2     margin:0 auto;3}

Demo

Horizontal centering of multiple block elements

To achieve horizontal centering of multiple horizontally arranged block elements, the traditional approach is to set the block element horizontally to Display:inline-block, and then set the Text-align:center on the parent element to achieve the same effect as the horizontal center of the element in the above row.

1 #container {2     text-align:center;3}4 5 #center {6     display:inline-block;7}

Demo

Using Flexbox to achieve horizontal centering of multiple block elements

Before using, first introduce the Flexbox.

The Flexbox layout (flexible Box) module is designed to provide a more efficient way to formulate, adjust, and distribute the layout of items in a container, even if their size is unknown or dynamic. is a new layout pattern in CSS3, designed for more complex web requirements in modern networks.

Flexbox has been quickly supported by the browser. Chrome 22+, opera 12.1+, and opera Mobile 12.1+, firefox18+ have supported the Flexbox described in this article.

　　

Learn to use Flexbox

To set the Flexbox layout for an element, simply set the display property value to flex.

1 #container {2     display:flex;3}

The default for Flexbox is a block-level element that, if needed, is defined as an inline-level element, in the same vein:

1 #container {2     display:inline-flex;3}

The Flexbox is made up of telescopic containers and telescopic projects. A telescopic container can be obtained by setting the display property of the element to flex or Inline-flex. A container set to Flex is rendered as a block-level element, while a container set to Inline-flex is rendered as a inline element. Each container that is set as flex, its internal elements become a flex project, which is a scaling project. In short, flex defines how the scaling items in a telescopic container should be laid out.

Back to the point, using Flexbox to achieve horizontal centering of multi-block elements, you only need to set the parent container's CSS as follows:

1 #container {2     justify-content:center;3     display:flex;4}

Demo

Horizontal vertical center of the known height width element

Law one.

Absolute positioning and negative margin implementations.

With absolute positioning, both the top and left properties of the element are set to 50%, and the margin is used to pull the element back to its own half of its height, which is vertically centered. The core CSS code is as follows:

1 #container {2     position:relative; 3} 4  5 #center {6     width:100px; 7     height:100px; 8     Position: Absolute 9     top:50%;10     left:50%;11     margin:-50px 0 0-50px;12}

Demo

Act Two.

Absolute positioning and margin.

This method also uses absolute positioning and margin, but does not need to know the height and width of the vertically centered element. The core code is as follows:

1 #container {2     position:relative; 3} 4  5 #center {6     position:absolute; 7     Margin:auto; 8     top:0; 9< c7/>bottom:0;10     left:0;11     right:0;12}

(Ibid. no longer)

Demo

Horizontal vertical centering of unknown height and width elements

Law one. When the element to be centered is an inline or inline-block element

When the element to be centered is inline or inline-block, the parent container can be cleverly set to Display:table-cell, with Text-align:center and vertical-align: The middle can be horizontally vertically centered.

The core code is as follows:

1 #container {2     display:table-cell;3     text-align:center;4     vertical-align:middle;5}6 7 #center {8 9}

Demo

Act Two. CSS3 Display Power

With the transform of CSS3, it is easy to achieve vertical centering of elements in the case of the high width of unknown elements.

The core code is as follows:

1 #container {2     position:relative; 3} 4  5 #center {6     position:absolute; 7     top:50%; 8     left:50%; 9< C11/>transform:translate (-50%,-50%); 10}

Demo

Fahsarm. Flex layout easy to solve

With the flex layout, you can easily achieve horizontal vertical centering of elements without the need for absolute positioning and other changes in layout.

The core code is as follows:

1 #container {2     display:flex;3     justify-content:center;4     align-items:center;5}6 7 #center {8 9}

Demo

Some summary

CSS3 's transform and flex are easy to use, but in the actual application of the project must consider compatibility issues, a large number of hack code may lead to outweigh the gains.

Some browsers still need to use the prefix notation:

1. flexboxtest{2   display:flex;3   display:-webkit-flex;//safari still needs to use a specific browser prefix 4}

Horizontal vertical Centering Scheme