CSS实现水平居中的几种方法

本文转载自查看原文 2021-10-12 21:06 2037 css

一、对于行内元素

　1、text-aligin实现水平居中

text-aligin：center

二、对于确定宽度的块级元素

　2、margin实现水平居中

　　 margin:0 auto

　3、绝对定位absolute和margin-left实现水平居中

1 .one {
2             width: 400px;
3             position: absolute;
4             margin-left: -200px;//该元素宽度的一半
5         }

三、对于未知宽度的块级元素

　4、CSS3通过flex实现水平居中

 1 <style>
 2         .big {
 3             display: flex;
 4             flex-direction: column;//父元素
 5         }
 6         .one {
 7            align-self: center;//子元素
 8         }
 9  </style>
10 <body>
11     <div class="big">
12         <div class="one">子元素</div>
13     </div>
14 </body>

5、要居中的元素设置table标签配合margin左右auto实现

 1 <style>
 2         .big {
 3             width: 900px;
 4             height: 300px;
 5             background-color: #d72e2e;
 6         }
 7         .one {
 8             width: 100px;
 9             height: 100px;
10             background-color: bisque;
11             display: table;
12             margin-left:auto;
13             margin-right: auto;
14         }
15 </style>
16 <body>
17     <div class="big">
18         <div class="one">子元素</div>
19     </div>
20 </body>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 [css]实现垂直居中水平居中的几种方式未知宽度水平居中的几种方法 CSS导航菜单水平居中的多种方法 CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法 HTML中css水平居中的几种方式实现水平垂直居中的几种方法 CSS布局：水平居中【css系列】六种实现元素水平居中方法 css3 让绝对定位元素水平居中的方法 css flex 使内容水平居中的方法...