Detailed explanation of 5 ideas for achieving simultaneous horizontal and vertical centering with CSS-CSS Tutorial-php.cn

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>

Copy after login

XML/HTML CodeCopy content to clipboard

<p class="test" style="background-color: lightblue;width: 200px;">Test textp>

# 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 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>

Copy after login

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

Copy after login

[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>

Copy after login

<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>

Copy after login

##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>

Copy after login

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

Copy after login

## 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>

Copy after login

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>

Copy after login

【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>

Copy after login

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

Copy after login

【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>

Copy after login

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

Copy after login

##Idea 5:

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

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

Copy after login

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>

Copy after login

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

Copy after login

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!

Related labels：

css 水平垂直居中

source：php.cn

Previous article：Detailed description of how to use stylus css framework Next article：Description of positioning method using position attribute in CSS

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn