div中的元素水平居中对齐

曾经终败给现在 2023-10-14 20:25 39阅读 0赞

![cffe6153b376432baeceac9e1b9650e6.png][]![b53c9cd02ee8454b9f019827e68624f4.png][]

<div>
        <img src="imgs/xy.jpg" alt="">
        <h2>百变小樱</h2>
    </div>
    <style>
        * {
        
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        div {
        
            width: 200px;
            height: 300px;
            margin: 20em auto;
            padding-top: 4em;
            border: 2px solid rgb(69, 82, 93);
            text-align: center;
            background-color: aliceblue;
            box-shadow: 2px 3px 8px 1px rgb(161, 174, 186);
        }
        div:hover {
        
            background-color: rgb(249, 252, 255);
            box-shadow: 2px 3px 8px 1px rgb(183, 193, 202);
        }
        img {
        
            display: inline-block;
            height: 100px;
            border: 3px solid black;
            border-radius: 50%;
        }
        h2 {
        
            display: inline-block;
            line-height: 100px;
            font-family: 幼圆;
        }
    </style>

**说明：**

*  需要将父 div 加上 text-align: center;，然后给子级都设为  display: inline-block;
 *  box-sizing: border-box; 是为了减去可能出现的 margin、padding 而多出的盒子尺寸

[cffe6153b376432baeceac9e1b9650e6.png]: https://img-blog.csdnimg.cn/cffe6153b376432baeceac9e1b9650e6.png
[b53c9cd02ee8454b9f019827e68624f4.png]: https://img-blog.csdnimg.cn/b53c9cd02ee8454b9f019827e68624f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关居中一个元素(水平+垂直居中)

我们的示例代码全在此基础上修改： ...... <style> { margin: 0;

末蓝、/ 2023年10月15日 10:44/ 0 赞/ 53 阅读

相关 div中的元素水平居中对齐

![cffe6153b376432baeceac9e1b9650e6.png][]![b53c9cd02ee8454b9f019827e68624f4.png][]

曾经终败给现在/ 2023年10月14日 20:25/ 0 赞/ 40 阅读

相关 div 水平垂直居中

<div class="parent"> <div class="child"></div> </div> 1、 div.pare

小鱼儿/ 2023年10月12日 08:11/ 0 赞/ 25 阅读

相关 DIVs水平垂直居中

.login-container { height: 260px; margin: 0 auto; /水平居中/ margin-top:

迈不过友情╰/ 2023年07月07日 03:37/ 0 赞/ 18 阅读

相关 div水平垂直居中

一、水平居中： 1、div盒子水平居中：比较容易，直接设置div元素的margin: 0 auto就可以实现。 2、div里面的内容水平居中：text-align:cent

朴灿烈づ我的快乐病毒、/ 2022年12月07日 01:14/ 0 赞/ 295 阅读

相关子div水平垂直居中及 div中label水平垂直居中

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-e

客官°小女子只卖身不卖艺/ 2022年11月06日 15:54/ 0 赞/ 254 阅读

相关 CSS制作水平垂直居中对齐

CSS制作水平垂直居中对齐 http://www.w3cplus.com/css/vertically-center-content-with-css

怼烎@/ 2022年09月25日 10:21/ 0 赞/ 288 阅读

相关 div水平垂直居中

.main\{width:960px;height:658px;position:absolute;top:50%;left:50%;margin-top:-329px;mar

向右看齐/ 2022年08月23日 12:47/ 0 赞/ 315 阅读

相关定宽高的div元素垂直水平居中

![1488621-20190528160226952-1274501532.png][] 关键点在于：采用绝对定位，使元素盒子左顶点位于垂直居中位置，再设置margin-l

ゝ一纸荒年。/ 2021年12月18日 07:47/ 0 赞/ 313 阅读

相关 div块元素垂直水平居中方法总结

1、已知块级元素的宽和高，使用绝对定位+外边距设定水平垂直居中。父元素position:relative，子元素position:absolute;top:50%;le

﹏ヽ暗。殇╰゛Y/ 2021年12月16日 12:39/ 0 赞/ 371 阅读