如何设置水平居中显示？

一般的方法是设置宽高，然后以margin去控制，比如：DIV居中的经典方法

本章介绍需要宽度自适应时如何水平居中，以及居中失效的几个点

水平自适应居中

比如设置一个列表水平居中显示

  • AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
  • BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  • CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
  • DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

添加布局元素：

   <div class="container">

     <div class="list-parentOuter">

       <div class="list-parentInner">

         <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>

         <div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>

         <div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>

         <div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>

       </div>

     </div>

   </div>

水平居中设置：

  1. list-parentOuter设置float，将元素list-parentOuter浮动（这样设置后，元素的宽度会自适应）
  2. list-parentOuter设置margin-left，以父容器的宽度*50，设置左侧margin
  3. lsit-parentInner设置position相对位置，以满足内容的100%填充list-parentOuter
  4. lsit-parentInner设置right，以父容器list-parentOuter的宽度*50，设置右侧距离
 .list-parentOuter {

   float: left;

   margin-left: 50%;

 }

 .list-parentInner {

   position: relative;

   right: 50%;

 }

我们添加点背景颜色，效果如下：

如上图，红色框先往右移50%绿色框的宽度，然后左移50%蓝色框的宽度。

完整html及css：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .container {

   width:600px;

   height:300px;

   background: green;

 }

 .list-parentOuter {

   float: left;

   margin-left: 50%;

   background: rgb(0, 0, 255,0.5);

 }

 .list-parentInner {

   position: relative;

   right: 50%;

   background: rgb(255, 0, 0,0.5);

   display: flex;

   flex-direction: column;

 }

 </style>

 </head>

 <body>

 <body>

   <div class="container">

     <div class="list-parentOuter">

       <div class="list-parentInner">

         <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>

         <div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>

         <div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>

         <div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>

       </div>

     </div>

   </div>

 </body>　

 </body>

 </html>

水平居中错误操作及总结

在以上css中上方容器container的样式，添加以下flex布局代码：

 .container {

   width:600px;

   height:300px;

   display: flex;

   flex-direction: column;

   background: green;

 }

里面的内容还能够居中么？效果如下：

如果是宽度1000，则是这样：

原因：

flex布局时，子元素不会再自适应宽度（即使设置了float=left）；

然后设置设置竖向布局方向，flex-direction: column，会将蓝框的宽度截了（flex-direction: column，会将超出的宽度截取）。

所以红框去获取父容器蓝框的宽度时，只能获取被截图的宽度。

红框在绿框内虽然元素是居中的，但是内容就不居中了。

所以如果需要内容居中，不要在蓝框的上方容器内添加flex布局相关代码。

总结

外层

  1. 外层的父容器，不能会截取外层宽度的代码（比如flex竖向布局）
  2. 外层需要设置float=left或者positon=absolute，以让外层的宽度自适应内层的宽度。
  3. 外层以其父容器的50%宽度，向右移动距离，方便后续居中设置

内层

  1. 内层的宽度，需要100%填充外层容器的。
  2. 通过设置相对位置，以外层50%宽度设置远离外层右侧。

Html/css 水平布局居中的更多相关文章

  1. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  2. CSS水平布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. React Native 中的 Flex Box 的用法（水平布局、垂直布局、水平居中、垂直居中、居中布局）

     版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...

  4. css水平竖直居中方式

    CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...

  5. CSS布局居中

    1.把margin设置为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效.

  6. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  7. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  8. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  9. 《CSS网站布局实录》学习笔记（三）

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...

随机推荐

  1. vue与其他框架对比

    https://cn.vuejs.org/v2/guide/comparison.html 1. vue 框架的特点? MVVM框架模式 轻量级,灵活,容易上手 数据驱动 组件化(单文件组件) 插件化 ...

  2. 用window.print()打印如何去掉页眉和页脚

    用window.print()打印如何去掉页眉和页脚 2007-07-12 11:44:52|  分类: javascript 知识|举报|字号 订阅     <script language= ...

  3. Windows系统下curl的下载和配置

    curl的下载和配置 简介:用URL规则在命令行下工作的文件传输工具. 下载:下载地址为 https://curl.haxx.se/download.html,在最底部找到Windows的版本,我下载 ...

  4. swiper插件在移动端，多个swiper左右滑动时有空白的问题

    之前在项目上用到了多个swiper.但是结构结构代码css.以及js  几乎一样的除了第一个swiper左右滑动有回弹.其他都没有回弹.于是尝试了各种方法都不行. 百思不得其解 ,最后在官网终于找到了 ...

  5. 面试官：你说你精通 Docker，那你来详细说说 Dockerfile 吧

    接上一篇:30分钟快速上手Docker,看这篇就对了! 一. 带着问题学Dockerfile 1.疑问 我们都知道从远程仓库可以pull一个tomcat等镜像下来,然后docker run启动容器,然 ...

  6. jmeter之cookies管理器的使用

    作用: 1 发送请求,经常要校验cookies信息  2 针对有的cookie是用的sessionid来进行校验的,这个就需要自己去配置cookie管理器里面的信息,而且sessionid是有时效性的 ...

  7. 8.Hash集合类型操作使用

    数据类型Hash (1)介绍 hash数据类型存储的数据与mysql数据库中存储的一条记录极为相似 Redis本身就类似于Hash的存储结构,分为key-value键值对,实际上它的Hash数据就好像 ...

  8. doxygen上手

    doxygen {#mainpage} doxygen是干什么的 相信大家在看MCU原厂的帮助文档的时候,都能看到doxygen的logo在右下角,没错,doxygen就是用来生成帮助文档的 doxy ...

  9. JavaScript——闭包（转自别人）

    有这样一个段子:说闭包的主要作用是什么?,答:面试.确实在许多面试中,闭包是必问项目,所以不为别的,只为面试,理解闭包就很重要. 说到 闭包 ,这是js不得不提的一个特性,很多传统语言都不具备这样的特 ...

  10. Beta冲刺——代码规范与计划

    这个作业属于哪个课程 软件工程 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.代码规范 采用ShowDoc网站进行编 ...