不确定宽的子元素在父元素中的水平居中(也可以水平垂直居中)

最新推荐文章于 2022-08-03 17:01:58 发布

how to fail

最新推荐文章于 2022-08-03 17:01:58 发布

阅读量501

点赞数

文章标签： css html5 vue.js javascript

本文链接：https://blog.csdn.net/wd_nmdQGMZFJ/article/details/107779975

版权

本文介绍了如何在CSS中使不确定宽高的子元素在父元素中实现水平和垂直居中。通过两种方法：1. 使用margin: 0 auto，但要求子元素设置宽度；2. 利用弹性盒模型，通过给父元素添加align-items:center实现子元素的水平垂直居中，即使子元素宽度和高度自适应。

摘要由CSDN通过智能技术生成

不确定宽的子元素在父元素中的水平居中

	一般没有设置宽的子元素想要在父元素中水平居中,子元素可能是后端返回给我们的数据,将宽度写死肯定不合适,因此可用定位方法将子元素水平居中,
	定位实现效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不确定宽的子元素的水平居中</title>
</head>
<body>
    <div class="parents">
        <div class="son">儿子</div>
    </div>
</body>
<style>
    .parents{
        width: 500px;
        height: 500px;
        position: relative;
        background: yellow;
        opacity: .7;
    }
    .son{
        /* width: 200px;
        height: 200px; */
        background: #ccc;
        position: absolute;
        left: 50%;
        transform: translateX(-50%) ;
    }
</style>
</html>

效果如图