15 Methods of horizontal and vertical center and 15 Methods of horizontal and vertical center

15 Methods of horizontal and vertical center and 15 Methods of horizontal and vertical center

I. horizontal center

1. Horizontal text Center

<Div class = "one"> Center Test </div> <style>. one {width: 200px; height: 100px; border: 1px solid red; text-align: center ;}</style>

2. Center the box

<Div class = "one"> center the box </div> <style>. one {width: 200px; height: 100px; border: 1px solid red; margin: 0 auto ;}</style> 3. <div class = "container"> <div class = "child"> relatively simple </div> <div class = "child"> </div> <div class = "child"> after complexity, but after the complexity. </Div> <div class = "child"> easy to use </div> <style>. container {height: 100px; padding: 8px; text-align: center; border: 2px dashed # f69c55 ;}. child {padding: 8px; width: 4rem; margin: 0 8px; color: # fff; background: #000; display: inline-block;} </style> 4. elastic layout, multi-block level horizontal center <div class = "flex-center"> <div> Test 1 </div> <div> Test 2 Test 2 Test 2 Test 2 Test 2 </div> <div> Test 3 Test 3 Test 3 </div> <style>. flex-center {width: 800px; padding: 8px; display: flex; justify-content: center; border: 2px dashed # f69c55 ;}. flex-center> div {padding: 8px; width: 100px; margin: 0 8px; color: # fff; background: #000 ;}</style> display: flex; poor compatibility can be solved like this: at least ie10 or above is supported. flex-center {display:-webkit-flex;/* New Syntax: Chrome 21 + */display: flex;/* New Syntax: Opera 12.1, Firefox 22 + */display: -webkit-box;/* Old syntax versions: Safari, iOS, Android browser, and older WebKit browsers. */display:-moz-box;/* earlier Syntax: Firefox (buggy) */display:-ms-flexbox;/* Mixed Syntax: IE 10 */}. flex-center> div {-webkit-flex: 1;/* Chrome */-ms-flex: 1/* IE 10 */flex: 1;/* NEW, spec-Opera 12.1, Firefox 20 + */-webkit-box-flex: 1/* OLD-iOS 6-, Safari 3.1-6 */-moz-box-flex: 1;/* OLD-Firefox 19 -*/}

5. Vertical center

1. You can use height: 100px, line-height: 100px for both display: block and display: inline-block;

2. Use display: table-cell

<Div class = "center-table"> <p class = "v-cell"> The more technology you learn </p> </div> <style>. center-table {width: 800px; display: table; height: 140px; border: 2px dashed # f69c55 ;}. v-cell {display: table-cell; vertical-align: middle ;}</style>

3. Use flex Layout

<Div class = "center-flex"> <p> Dance like nobody </p> </div> <style>. center-flex {width: 500px; height: 140px; display: flex; flex-direction: column; justify-content: center; border: 2px dashed # f69c55 ;}</style>

4. Fixed height of block-level elements (this should be the most familiar one, and we will not release this example)

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

5. Unknown height

<Div class = "parent"> <div class = "child"> there are 10 people in the world who understand binary and binary. </Div> <style>. parent {height: 140px; position: relative; border: 2px dashed # f69c55 ;}. child {position: absolute; top: 50%; transform: translateY (-50%); background: black; color: # fff; padding: 1rem; width: 12rem ;} </style> transform compatibility:

transform: translate(50px,100px);

-ms-transform: translateY(-50%)/* IE 9 */-webkit-transform:  translateY(-50%)/* Safari and Chrome */-o-transform: translateY(-50%)/* Opera */-moz-transform:  translateY(-50%)；/* Firefox */

3. Center horizontally and center vertically

1. horizontal vertical center with fixed width and height (familiar to everyone)

Parent {

Position: relative ;}. child {width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin:-70px 0 0-170px ;}
2. I do not know the width and height-horizontal vertical center

.parent {    position: relative;}.child {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

3. flex layout (the above water and vertical center examples will not be written)

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

4. Use grid to align horizontally and vertically, with poor compatibility and not recommended.

. Parent {height: 140px; display: grid;}. child {margin: auto ;}
5. horizontal center of the pop-up window (if it is not easy to put it, You can paste it and run it)

<Div class = "element"> <div> align horizontally and vertically. </div> <style>. element {width: 300px; height: 300px; background-color: deeppink; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto ;}</style>

If you have any good methods, leave a message.