css居中方式汇总

最新推荐文章于 2024-04-02 14:52:40 发布

yang114544

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量90

点赞数

文章标签： css

本文链接：https://blog.csdn.net/yang114544/article/details/117971427

版权

       #box {
           width: 600px;
           height: 600px;
           /* 第一种方法position:relative; */
           background-color: yellow;
           /*第二种和方法 position:relative; */
           /* 第三种方法display:flex;
           align-items:center; */
           /*第四种方法display: flex;
           flex-direction: column;
           justify-content: center; */
       }

       .a {
           width: 300px;
           height: 300px;
           background-color: red;
           /* 第一种方法position:absolute;
           top:25%;
           left:25%; */
           /* 第二种方法position:absolute;
           第一种方法 top:0%;
           left:25%;
           transform:translate(0,50%); */
       }

       #text {
           width: 300px;
           height: 300px;
           background-color: red;
           border: 1px solid black;
           margin: 0 auto;
           /* 第六种方法针对的是文本文档display: table; */
           /*第七中方法 display: flex;
           flex-direction: column;
           justify-content: center; */
       }

       .word {
           /* 第五种方法这里针对的是文本元素 height: 300px;
           line-height:300px;
           text-align:center; */
           /*第六种方法针对的是文本文档 display: table-cell;
           vertical-align: middle; */
       }
   </style>
   <body>
       <p>1.在这种div包裹div的情况下可以计算出绝对定位中的top和left值来实现水平垂直居中，但是比较复杂并且不通用需要计算
           div的宽度值</p>
       <p>2.第二种情况，这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。</p>
       <p>3.第三种情况我们使用fiex布局方式来是子元素的div块居中</p>
       <p>4.第四种方法同样使用的是fiex布局的方式</p>
       <P>5.这里针对的是文本元素</P>
       <P>6.利用表格布局利用表布局的vertical-align: middle可以实现子元素的垂直居中。</P>
       <P>7.利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。flex是在CSS3中定义，在较老的浏览器中存在兼容问题。</P>
       <div id="box">
           <div class="a">
               我是测试div
           </div>
       </div>
       <div id="text">
           <p class="word">不知道这是谁的东西</p>
       </div>
   </body>

yang114544

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css居中方式汇总

<style> * { margin: 0px; padding: 0px; } #box { width: 600px; height: 600px; /* 第一种方法position:relative; */ background-color: yellow; /*第二种和方法...
复制链接

扫一扫