水平居中设置

最新推荐文章于 2024-05-28 13:09:25 发布

矜鶴740

最新推荐文章于 2024-05-28 13:09:25 发布

阅读量270

点赞数

文章标签： css vue.js html

本文链接：https://blog.csdn.net/qq_63058150/article/details/121879731

版权

html代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码：

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

定宽块状元素

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

宽高定盒子水平居中

效果如下：

宽高不定水平居中

 <div class="box">
        <div class="box1">
            慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
        </div>
    </div>

添加样式：

 .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;

    }

    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

效果如下：

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

矜鶴740

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平居中设置

html代码：<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div></body>css代码：<style> .txtCenter{ text-align:center; }</style>定宽块状元素html代码：<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>&
复制链接

扫一扫