CSS布局问题，为何不能完全居中，求大神解答

HTML:

CSS：
.item{
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
margin:4px;

background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;

}
.box{
margin: 16px;
padding: 4px;

background-color: #e7e7e7;
width: 150px;
height:150px;

display: flex;
flex-direction: row;

}
html, body{
height: 100%;
}
body{
display: flex;
align-items: center;
justify-content: center;
vertical-align: center;
flex-wrap: wrap;
align-content: center;
background-color: blue;
}
.item:nth-child(2){
align-self: center;
}

点赞
写回答
关注问题
收藏
复制链接分享
邀请回答

1条回答

采纳
码龄粉丝数

被点赞

被采纳

采纳率

私信
蚂蚁冲锋队 4年前
css里面横向居中 text-align: center; 如果在一个
里面设置 text-align: center; 那么它里面的子控件会居中排列，如果是在一个控件比如
上设置居中，那么button上的内容会水平居中。
css里面的垂直居中vertical-align: cm; 这个属性并不想我们预期的那样让控件垂直居中排列或者控件内容垂直居中显示。例如下面的例子
```
 <div style="width: 100%;height: 10%;background-color: #0f0;vertical-align: cm;">
        <button style="width: 10%;height: 90%;">你好</button>
        <label style="font-size: 0.6rem;">will</label>
    </div>
```
显示效果

vertical-align: cm;属性设置与否显示效果都是一样的，但如果加上另一个属性float: left; 显示如下：
```
 <div style="width: 100%;height: 10%;background-color: #0f0;">
        <button style="width: 10%;height: 90%;float: left;">你好</button>
        <label style="font-size: 0.6rem;float: left;">will</label>
    </div>
```
如果
设置了cm，但控件里面设置了float:left;如下
<div style="width: 100%;height: 10%;background-color: #0f0;vertical-align: cm;"> <button style="width: 10%;height: 90%;float: left;">你好</button> <label style="font-size: 0.6rem;float: left;">will</label> </div>

显示效果

分析：根据以上三种情况可见，垂直居中这个属性必须在某些特殊情况下才有效，默认情况下

中的控件是水平排列，且后面的控件以前面的控件
作为参考垂直排列，这意味着默认情况下
设置了垂直排列的属性。但，如果改变了子控件的排列方式，如float属性，那么默认的垂直属性便会
失效。另外，对于垂直属性我也是很纠结，希望能有更全面的使用说明。
点赞评论复制链接分享

提交

相关推荐

html+css布局问题，求教大神 css
4年前

回答 2 已采纳大div包含5个小div，如何让大div左右没有内边距，小div间有边距，且平分大div？
求大神指点div布局顺序问题 css3 html5
4月前

回答 4 已采纳这是一个div布局，中部自适应的代码下面是第一次的div布局顺序代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .one{ width:75px; height:100px; background-color:#F60; float:left; margin-top:0px; margin-left:0px; } .two{ height:100px; background-color:#F00; margin-left:75px; margin-right:75px; } .three{ width: 75px; height: 100px; background-color: #FC0; float: right; margin-top:0px; margin-right:0px; } </style> </head> <body> <div class="one">this is one</div> <div class="two">this is three</div> <div class="three">this is three</div> </body> </html> 这是运行结果下面是调整后的代码 <!doctype html> <html> <head> <meta charset="utf-8"> <style> .one{ width:75px; height:100px; background-color:#F60; float:left; margin-top:0px; margin-left:0px; } .two{ height:100px; background-color:#F00; margin-left:75px; margin-right:75px; } .three{ width: 75px; height: 100px; background-color: #FC0; float: right; margin-top:0px; margin-right:0px; } </style> </head> <body> <div class="one">this is one</div> <div class="three">this is three</div> <div class="two">this is three</div> </body> </html> 运行如下求大神讲解一下！！！
为何flex布局下的文字出现错位以及无法居中？ css html5
1年前

回答 1 已采纳 html代码如下： ``` 打粉小站打粉小站首页站长小窝小站社区小站伊始）随机页面 ``` 以及css代码： ``` #content{ display:flex; width:100%; flex-wrap:wrap; } #left_content{ width:15%; background-color:#F0F8FF; line-height:20%; padding:10px; flex-wrap:wrap; } #subline{ font:700 2.5em Serif; text-decoration:underline; } #left_item2{ justify-content:center; } ``` 结果如下图：![图片说明](https://img-ask.csdn.net/upload/202004/23/1587612006_403162.png) “打粉小站”四字没有居中，且下方的列表重叠
求大神用css做一个简易相册 css html5
5年前

回答 2 已采纳用一个HTML。css做一个简易相册自动换转还有循环还可以在上面打字，求大神丫丫呀呀呀！
click事件的ajax触发不了，请求大神解答
3年前

回答 17 已采纳 ``` 登录 >"> >"/>办公系统员工登录 ${errorMessage } 忘记密码/花名地区：通州，南通，如东，广州，南京，佛山创新  专业  合作  务实 ``` click事件的ajax触发不了，请求大神解答
layer.js载入失效，求大神解答 css javascript jquery
1年前

回答 1 已采纳 ![图片说明](https://img-ask.csdn.net/upload/202005/12/1589273796_807271.jpg) ![图片说明](https://img-ask.csdn.net/upload/202005/12/1589273812_373351.png) 看着视频敲的，不知道为什么会报错 1.已经引入jquery 2.2 2.引入顺序在layer.js之前
小白基础css布局求解答 css
5年前

回答 1 已采纳 margin与padding与top与absolute relative的关系本人完全被搞糊涂了
为什么这个关闭按钮，line-height=height不居中 css
3年前

回答 5 已采纳，感觉把line-height调小一点反而居中了 ![图片说明](https://img-ask.csdn.net/upload/201805/05/1525482443_140530.png) ![图片说明](https://img-ask.csdn.net/upload/201805/05/1525482462_297287.png)
关于css 双飞翼布局问题 css
3年前

回答 2 已采纳 TAT...最后8个币，一段时间不上，咋以前10块能冲200币的现在98才能冲250币，c s d n想钱想疯了吧，对于我这水平有没有什么能来币的方法？。。。。在双飞翼布局中，有几点不是很懂，求大神点拨。 1.设置.inner margin-left很好理解，就是要让#inner里面的内容从网页中间开始显示，但是为什么要设置 margin-right呢？（我去掉对布局好像也没影响） 2.对于1 我的猜想是想让inner里面的内容右边受控制，但是我给inner里面填满了内容，发现**内容不能换行**，这是为什么？同时发现 left 和right里面的文字都不能自动换行 3.取消middle的width=100% 猜测应该继承body的宽度，结果实际值远比body大的多这是为什么呢？ ![图片说明](https://img-ask.csdn.net/upload/201803/12/1520837257_653898.png) ![图片说明](https://img-ask.csdn.net/upload/201803/12/1520837270_333841.png) ``` #middle#middlekjzdakskshdkahdkahdkahsdkadhkajdhkahdkahdkahdkadhkahdskashdskasdhkahdkadhskashdskaahskdhakshdaksdhkashdkashdakshdkahdkahdkah #left #right ```
关于网页布局显示的问题(界面显示不完全) css javascript html5
6年前

回答 4 已采纳 ![图片说明](https://img-ask.csdn.net/upload/201508/06/1438827463_541030.png) 网页上只能显示屏幕大小的区域,其他区域显示为空白,这是怎么回事,css写错了啊
CSS布局解决方案——居中布局（水平居中）
3年前

Assassin大神的博客方案一：使用inline-block+text-align(1)原理：先将子框由块级元素改变为行内块元素，在通过设置行内块元素居中以达到水平居中。(2)用法：对子框设置display:inline-block;对父框设置text-align:center;(3)示例：(4)...
css grid布局实现水平垂直居中文字水平垂直居中
7月前

springLilly的博客原来一直使用flex布局来实现水平垂直居中，今天才知道还有grid也是很好用的，参考阮一峰大神的博客，简单记录一下学习； <div class="container"> <div class="item">1</div> <div class=...
CSS布局解决方案——居中布局（水平垂直居中）
3年前

Assassin大神的博客方案一：使用absolute+transform方案二：使用inline-block+text-align+table-cell+vertical-align方案三：使用flex+justify-content+align-items
css span 右端对齐_CSS居中问题总结
4月前

小软观察的博客居中问题大概可以分为水平居中和竖直居中，同时又分为行内元素和块级元素。现在我就跟随我一起总结一下。一、利用text-align:center实现水平居中你一定想问text-align是啥，来一起探讨一下text-align是个什么东西...
web前端大神整理：CSS 布局经典问题
3年前

weixin_30632089的博客本文来自前端大神的整理，主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox 布局，等等。 CSS 基础知识 ...
使用css中的flex布局实现盒子垂直居中
2年前

莉兹Liz的博客一、Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。块级元素flex布局： #box{ display: flex; } 行内元素flex布局： #box{ display: inline-flex; } ...
css 右对齐_CSS居中问题总结
5月前

weixin_39802055的博客居中问题大概可以分为水平居中和竖直居中，同时又分为行内元素和块级元素。现在我就跟随我一起总结一下。一、利用text-align:center实现水平居中你一定想问text-align是啥，来一起探讨一下text-align是个什么东西...
CSS布局解决方案——居中布局（垂直居中）
3年前

Assassin大神的博客方案一：使用table-cell+vertical-align方案二：使用absolute+transform方案三：使用flex+align-items
css td居中_css实用手册CSS 垂直居中的七种方法，值得收藏
4月前

weixin_30847543的博客关注前端达人，与你共同进步开篇我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次...
css实现div垂直水平方向上居中
2年前

丽丽大神ing的博客方案一： <style> .box{ display: -webkit-flex; display: -moz-flex; display: flex; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;... ...