居中布局的整理

最新推荐文章于 2023-08-14 16:13:48 发布

勤奋小学童

最新推荐文章于 2023-08-14 16:13:48 发布

阅读量247

点赞数

分类专栏： CSS 文章标签： css 居中处理

本文链接：https://blog.csdn.net/CJXBShowZhouyujuan/article/details/87969722

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

居中布局的整理

（1）水平居中

行内元素：text-align:center
块级元素：margin: 0 auto
display:flex; justify-content:center;
absolute + transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>居中对齐</title>
    <style>
      .customDiv {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        text-align: center;
      }
     .customDiv .imgCus {
        width: 200px;
        height: 200px;
      }
     .div1 {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        position: relative;
      }
      .div1 .img1 {
        width: 100px;
        height: 100px;
        position: absolute;
        /* top: 50%; */
        left: 50%;
        transform: translate(-50%, 0);
        /* transform: translate(-50%, -50%); */
      }
    </style>
</head>
<body>
    <div class="customDiv">
      <span>居中对齐，居中对齐，居中对齐</span>
      <!-- <img class="imgCus" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551244511903&di=6a8301bd7de1b7d86b9ec83e7c507d13&imgtype=0&src=http%3A%2F%2Fi4.hexunimg.cn%2F2016-10-11%2F186368488.jpg"/> -->
    </div>
    <div class="div1">
        <img class="img1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551244511903&di=6a8301bd7de1b7d86b9ec83e7c507d13&imgtype=0&src=http%3A%2F%2Fi4.hexunimg.cn%2F2016-10-11%2F186368488.jpg"/>
    </div>
</body>
</html>
/*
span,img 是行内元素，使用 text-align: center;可以实现水平的居中；
把img设置为块级元素，可以通过margin: 0 auto 实现水平居中;
div 设置为flex；display:flex; justify-content:center;
div:position:relpative .img: position:absolute; top:0; left:50%; transform:translate(-50% 0)
                                                                 margin-left: -50px;
top,left跟根据父元素的宽和高偏移的，而transform: translate(-50%, -50%);是根据自身的宽高偏移的。
不使用transform 的也可以使用margin-left:-子元素的宽度

注释：img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素
行内非替换元素，例如span, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度

.customDiv .imgCus {
    width: 200px;
    height: 200px;
    display:block;
    margin: 0 auto;
 }
 .customDiv {
        width: 500px;
        height: 500px;
        display:flex;
        justify-content:center;
 }
*/

（2）垂直居中

line-height:height
absolute+transform
flex+align-items:center

<div class="div2">
       <span lass="imgCus">fjafkjasjfalsdkfj fjalsdfj  fajfj fadsjkfl jfdajkflj fadjk </span>
 </div>
 .div2 {
   width: 400px;
   height: 400px;
   border: 1px solid red;
 }
 .div2 .imgCus {
  display: inline-block;
  height: 100px;
  border: 1px solid green;
  line-height: 100px;
}
/*
.div2 {
   width: 400px;
   height: 400px;
   border: 1px solid red;
   display:flex;
   align-items:center;
 }
*/

（3）水平垂直居中

absolute+transform
flex+justify-content:center+align-items:center

勤奋小学童

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
居中布局的整理

居中布局的整理（1）水平居中行内元素：text-align:center 块级元素：margin: 0 auto display:flex; justify-content:center; absolute + transform&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"...
复制链接

扫一扫

专栏目录