Centering in CSS

In practical work, we often encounter scenes that need to be centered horizontally. For example, for aesthetics, the title of an article is generally displayed in the horizontal center.

Here we score two cases: inline elements or block elements , and block elements are divided into fixed-width block elements and variable-width block elements;

1. Center the inline element

If the set element is an inline element such as text, image, etc., the horizontal centering is achieved by setting the parent element: text-align:center ;

Example :

html code:

<body>
  <div class="txtCenter"> I want to center it horizontally in the parent container. </div>
</body>

css code:

<style>
  .txtCenter{
    text-align:center;
  }
</style>

2. Center the block element

For the centering of block elements, it can be divided into two cases: fixed-width block elements and variable-width block elements. Next, let's take a look at them separately:

⑴ . The fixed-width block element is centered

A fixed-width block element means that the width attribute of the element has a fixed value . Elements that meet the two conditions of fixed-width and block elements can be centered horizontally by setting the left and right margin values to ' auto ' (the upper and lower margin values are optional);

Example :

html code:

<body>
  <div> I am a fixed-width block element, haha, I want to center it horizontally. </div>
</body>

css code:

<style>
div{
    border:1px solid red;/*In order to display the centering effect, set a border for the div*/
    width: 200px; /*fixed width*/ 
    margin:20px auto; /* margin-left and margin-right are set to auto */
}

</style>

⑵ . The variable width block element is centered

In practical work, we will encounter the need to set centering for "block elements of indeterminate width", such as paging navigation on web pages, because the number of pagination is indeterminate, so we cannot limit its flexibility by setting the width. (Variable-width block elements: The width of block elements is not fixed.)

① . Add table tag

Use the length adaptability of the table tag—that is, neither define its length nor default the length of the parent element body (the length of the table is determined according to the length of the text in it), so it can be regarded as a fixed-width block element, and then use the fixed-width block element. Width block-centered margin method to center it horizontally.

Step 1:

Add a table tag (including <tbody>, <tr>, <td>) outside the centered element that needs to be set ;

Step 2 :

Set the " left and right margin center " for this table (this is the same as the fixed width block element method).

Example :

html code:

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>I am the first line of text</li>
        <li>I am the second line of text</li>
        <li>I am the third line of text</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代码：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

② . 设置 display: inline 与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置 ;

示例 :

html代码：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

③ . 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中 ;

示例 :

html代码：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

3 . 垂直居中

我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好 ;

这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本 ;

⑴ . 父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

示例 :

html代码：

<div class="container">
    hi,imooc!
</div>

css代码：

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

⑵ . 父元素高度确定的多行文本

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

① . 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle ;

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用 ;

示例 :

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码：

table td{height:500px;background:#ccc}

② . 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差 ;

示例 :

html代码：

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代码：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

特别注意 :

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质 ;

Guess you like