Detailed explanation of 5 ideas for achieving simultaneous horizontal and vertical centering with CSS

The following editor will bring you a brief analysis of 5 ideas for achieving horizontal and vertical centering with CSS. The editor thinks it’s pretty good. Now I’ll share it with you and give it a reference. Let’s follow the editor and take a look.

Horizontal centering and vertical centering have been introduced separately. This article will introduce horizontal and vertical centering at the same time. 5 ideas

Idea 1: text-align + line-height achieve horizontal and vertical centering of a single line of text

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>

XML/HTML CodeCopy content to clipboard

1. b4a6a2a776d37576c8ff530153828787Test texta7447e9e15348813b597b50fafc8734e

# Idea 2: text-align + vertical-align

【1】Set text-align and vertical-align on the parent element, set the parent element to the table-cell element, and set the child element to the inline-block element

[Note] If it is compatible with IE7-browser, change the structure to f5d188ed2c074f8b944552db028f98a1 structure to achieve the effect of table-cell; use

display:inline;zoom:1; to achieve inline- The effect of block

<style>   
.parent{   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle;   
}   
.child{   
    display: inline-block;   
}   
</style>

<p class="parent" style="background-color: gray; width:200px; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

[2] If the child element is an image, table-cell can not be used, but its parent element uses row height instead of height, and the font size is set to 0 . The child element itself sets vertical-align:middle

<style>   
.parent{   
    text-align: center;   
    line-height: 100px;   
    font-size: 0;   
}   
.child{   
    vertical-align: middle;   
}   
</style>

<p class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>

##Three ideas: margin + vertical-align　If you want to set vertical-align in the parent element, it must be set to the table-cell element; if you want margin:0 auto to achieve horizontally centered block element content to expand the width, it must be set to table element. The table element can be nested inside the tabel-cell element, just like a cell can nest a table

[Note] If it is compatible with IE7-browser, the structure needs to be changed to

<style>   
.parent{   
    display:table-cell;   
    vertical-align: middle;   
}   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

## Idea 4:

Use absolute【1】Use the box model

feature of the absolutely positioned element, and set margin:auto

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 0;   
    left: 0;   
    rightright: 0;   
    bottombottom: 0;   
    height: 50px;   
    width: 80px;   
    margin: auto;   
}   
</style>

based on the offset attribute being a certain value.

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

【2】Use the offset attribute of the absolutely positioned element and the own offset of the translate()
function

to reach the level The effect of vertical centering

[Note]IE9-browser does not support

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

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

【3】When the width and height of the child element are known Below, you can use the negative value of margin to achieve the horizontal and vertical centering effect

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 80px;   
    height: 60px;   
    margin-left: -40px;   
    margin-top: -30px;   
}   
</style>

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

##Idea 5:

Use flex　[Note] IE9-browser does not support [1] Use margin:auto

<style>   
.parent{   
    display: flex;   
}   
.child{   
    margin: auto;   
}   
</style>

rrree

[2] on scalable projects Use main axis alignment justify-content and cross axis alignment align-items on the scalable container

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

<style>   
.parent{   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}   
</style>

A brief analysis of the above article The five ideas for achieving simultaneous horizontal and vertical centering with CSS are all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

The above is the detailed content of Detailed explanation of 5 ideas for achieving simultaneous horizontal and vertical centering with CSS. For more information, please follow other related articles on the PHP Chinese website!