1. Horizontal centering setting: inline elements
In actual work, we often encounter scenarios where horizontal centering needs to be set. For example, for the sake of beauty, the title of an article is generally displayed horizontally in the center.
Here we have two different situations: inline elements or block elements. Block elements are divided into fixed-width block elements and variable-width block elements. Today we first learn how to horizontally center inline elements?
If the set element is an inline element such as text or picture, horizontal centering is achieved by setting text-align:center to the parent element. (Parent element and child element: As in the following html code, div is the parent element of the text "I want to display it horizontally and centered in the parent container". On the contrary, this text is the child element of div) The following code:
html code:
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style>2. Horizontal centering setting: fixed-width block element
When the element to be set is a block element, using text-align: center will not work. At this time, it is also divided. Two situations: fixed-width block elements and variable-width block elements.
In this section, we will first talk about fixed-width block elements. (Fixed-width block elements: The width of block elements is a fixed value.)
Elements that meet the two conditions of fixed width and block can be realized by setting the "left and right margin" value to "auto" Centered. Let's look at an example of setting the div block element to be horizontally centered:
html code:
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>can also be written as:
margin-left:auto; margin-right:auto;
Note: the "upper and lower margin" of the element It can be set at will.
3. Summary of horizontal centering: Method 1 for block elements with variable width
In actual work, we will encounter the need to set the center for "block elements with variable width", such as on a web page Paging navigation, because the number of paging is uncertain, we cannot limit its flexibility by setting the width. (Variable-width block elements: The width of block elements is not fixed.)
There are three methods for centering block elements with variable widths (all three methods are currently used):
1. Add the table tag
2. Set display: inline method: Similar to the first method, set the display type to inline elements and set the attributes of variable-width elements
3. Set position: relative and left:50 %: Use relative positioning to offset the element by 50% to the left, that is, to achieve the purpose of centering.
This section will talk about the first method:
Why choose method one to join? The table tag? uses the length adaptability of the table tag—that is, it does not define its length and does not default to the length of the parent element body (the length of the table is determined according to the length of the text within it), so it can be regarded as a fixed-width block element, and then Use a fixed width block centered margin method to center it horizontally.
Step one: Add a table tag (including
,Step 2: Set the "left and right margins in the center" for this table (this is the same method as the fixed-width block element).
For example:
html code:
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css code:
<style> table{ border:1px solid; margin:0 auto; } </style> 4. Summary of horizontal centering: variable width block element method 2
In addition to inserting the table tag mentioned in the previous section, which can center the variable-width block elements horizontally, this section introduces the second method to achieve this effect, changing the display type of the element to an inline element, using Its properties are set directly.
Second method: Change the display of the block-level element to inline type (set to inline element display), and then use text-align:center to achieve the centering effect. The following example:
html code:
<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 code:
<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; } 3
</style>The advantage of this method compared to the first method is that there is no need to add unsemantic tags. But there are also some problems: it changes the display type of the block element to inline, turning it into an inline element, so it loses some functions, such as setting the length value.
3. Summary of horizontal centering: Method 3 of variable-width block elements
In addition to inserting table tags and changing the display type of elements mentioned in the previous two sections, you can make variable-width block elements In addition to horizontal centering, this section introduces the third method to achieve this effect, which is achieved by setting floating and relative positioning.
Method 3: Achieve horizontal centering by setting float for the parent element, then setting position:relative and left:50% for the parent element, and setting position:relative and left: -50% for the child element.
We can understand it this way: Assume that there is a bisector in the middle of the parent layer of the ul layer (that is, the div layer in the example below) that divides the parent layer of the ul layer (div layer) into two parts. The css code is to align the leftmost end of the ul layer with the bisector of the ul layer's parent layer (div layer); while the css code for the li layer is to align the bisector of the li layer with the leftmost end of the ul layer (which is also the bisector of the div layer). Line) alignment to achieve centering of the li layer.
The code is as follows:
<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 code:
<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>These three methods are widely used, each with its own advantages and disadvantages. Which method should be chosen specifically? It depends on the specific situation.
六、垂直居中：父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<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}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
八、垂直居中：父元素高度确定的多行文本二
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 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，破坏了原有的块状元素的性质。
九、隐性修改display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a> </div>
css代码
<style> .container a{ position:absolute; width:200px; background:#ccc; } </style> 以上就是【CSS笔记十】CSS样式设置小技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
