The most comprehensive method for horizontal vertical center of elements and the most comprehensive method for vertical center of Elements

The most comprehensive method for horizontal vertical center of elements and the most comprehensive method for vertical center of Elements
1. Horizontal Center 1.1 known width block element width:

.child{width:1000px;margin:0 auto;}

1.2 text content center:

.parent{text-align:center;}

1.3 form:

.child{display:table;margin:0 auto;}

1.4 If the width is known, set position: absolute and margin-left to the negative half of the width.

.parent{position:relative;}.child{position:absolute;left:50%;width:150px;margin-left:-75px;}

1.5 unknown width, by setting position: absolute

.parent{position:relative;}.child{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}

1.6 use flex layout (poor compatibility, it feels a little floating, not in the Document Stream)

First:. parent {display: flex; justify-content: center;} second:. parent {display: flex;}. child {margin: 0 auto ;}

2. Vertical center 2.1 text vertical center. child {height: 20px; line-height: 20px} 2.2vertial-align: middle;

Method 1 :. parent {display: table-cell; vertical-align: middle; height: 20px;} Method 2 :. parent {display: inline-block; vertical-align: middle; line-height: 20px ;}

2.3 unknown height, set position: absolute

    .parent{position:relative;}    .child{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}

2.4 If the height is known, set position: absolute and margin-top to the negative half of the height.

    .parent{position:relative;}    .child{position:absolute;top:50%;height:150px;margin-top:-75px;}

2.5 using flex Layout

    .parent{display:flex;align-items:center;}