转载：https://blog.csdn.net/a785975139/article/details/78706440

html常见盒子居中小结

在写界面时，经常被元素居中的问题困扰。经过一番查阅资料和摸索，鄙人实践出了一套常见元素居中的办法，现在记录下来，以便日后参考。

元素在标准文档流和非标准流中的表现有所不同，所以居中方法也要分开来进行说明。

一、标准文档流

标准文档流里，元素被分为块级元素和行内元素。常用的块级元素有div、h1~h7、li等，它们能够设置宽和高；如果不显示设置，水平上将撑满父元素；高度为padding-top和padding-bottom以及子元素的高度决定；行内元素如p、span、a等，不能设置宽高（设置了也不起作用），其宽高由内容宽高决定。

块级元素

块级元素居中前必须为其指定明确的宽高。以div为例：

  • 水平居中

<style>

.outer{

background-color: yellow;

height:200px;

width:200px;

}

.inner{

width: 50%;/*必须指定，否则将撑满外层div*/

height: 50%;

margin: 30px auto;

background-color: green;

color: white;

}

</style>

<body>

<div class="outer">

外层

<div class="inner">

内层

</div>

</div>

</body>

第1列为css样式，内层div背景色为绿色，外层div背景色为黄色，第2列为html代码，第3列为效果图，表示已水平居中。要点在于，子div和父div必须有明确的width。

  • 垂直居中

div的垂直居中没那么简单。

html代码如下：

<body>

<div class="outer">

<div class="inner">

</div>

</div>

</body>

错误尝试一：

<style>

.outer{

background-color: yellow;

height:200px;

width:200px;

padding-top: 50px;

}

.inner{

width: 50%;

height: 50%;

background-color: green;

color: white;

}

</style>

父div高200px，子div高100px，只要子div上边距与父div的上边距间隔50px，子div就垂直居中了。这个没错，只是给父div加padding-top，导致父div的实际占用高度加了50px，即为250px。失败！

错误尝试二：

<style>

.outer{

background-color: yellow;

height:200px;

width:200px;

}

.inner{

width: 50%;

height: 50%;

margin: auto 10px;

background-color: green;

color: white;

}

</style>

想当然地以将子div的上下margin设为auto，但是浏览器好像不认识这种样式，应该是没有这个用法，太尴尬了。失败！

错误尝试三：

<style>

.outer{

background-color: yellow;

height:200px;

width:200px;

}

.inner{

width: 50%;

height: 50%;

margin-top: 50px;

background-color: green;

color: white;

}

</style>

子div的margin-top设为50px应该是正确的才是呀，为什么？由于父div没有border，这时的margin参考点就不是父div而是父div所在一行，即整行的margin-top为50px，所以父子元素整体下落了50px。失败！

正确写法：

<style>

.outer{

border: 1px solid rgba(0,0,0,0);

background-color: yellow;

height:200px;

width:200px;

}

.inner{

width: 50%;

height: 50%;

margin-top: 50px;

background-color: green;

color: white;

}

</style>

果然给父div设置一个无透明的border就就能正确居中了。另一种办法是，父div不设置border，改为"overflow: hidden;"也行。总之，垂直居中需要自己计算垂直方向的margin值，浏览器无法通过"auto"样式来自动居中。

  • 水平垂直居中

将水平居中和垂直居中综合一下，就能实现水平方向和垂直方向同时居中了：

<style>

.outer{

border: 1px solid rgba(0,0,0,0);

background-color: yellow;

height:200px;

width:200px;

}

.inner{

width: 50%;

height: 50%;

margin:auto auto;

margin-top: 50px;

background-color: green;

color: white;

}

</style>

<body>

<div class="outer">

<div class="inner">

</div>

</div>

</body>

行内元素

  • 水平居中

行内元素的居中比较简单，在其父元素上直接使用"text-align: center;    "就能满足绝大多数需求了：

<style>

.outer{

padding:10px 10px;

background-color: yellow;

height:200px;

width:200px;

text-align: center;

}

.inner{

background-color: green;

color: white;

}

</style>

<body>

<div class="outer">

<span class="inner">

项脊轩，旧南阁子也。室仅方丈，可容一人居。百年老屋，尘泥渗漉，雨泽下注；每移案，顾视，无可置者。

</span>

</div>

</body>

  • 垂直居中

个人没找到好的办法，一般是将其转为块元素，然后再按照块级元素的居中方式来的：

<style>

.outer{

background-color: yellow;

height:200px;

width:200px;

text-align: center;

}

.inner{

display: inline-block;

height: 85px;

margin: auto auto;

margin-top:57.5px;

background-color: green;

color: white;

}

</style>

<body>

<div class="outer">

<span class="inner">

项脊轩，旧南阁子也。室仅方丈，可容一人居。百年老屋，尘泥渗漉，雨泽下注；每移案，顾视，无可置者。

</span>

</div>

</body>

别忘记指定高度！!

  • 行内元素特殊元素的对齐

1）checkbox

chexbox与文字在垂直上一般不是对齐的，很不美观。这时可对checbox应用"vertical-align: text-bottom;"样式来调整：

默认表现：

<style>

.outer{

width: 200px;

height: 100px;

padding-top: 50px;

background-color: yellow;

padding-top: 50px;

}

</style>

<body>

<div class="outer">

<form action="" method="post">

爱好：<input type="checkbox" name="sex">男

<input type="checkbox" name="sex">女

</form>

</div>

</body>

使用样式后：

<style>

.outer{

width: 200px;

height: 100px;

padding-top: 50px;

background-color: yellow;

padding-top: 50px;

}

input[type="checkbox"]{

vertical-align: text-bottom;

}

</style>

<body>

<div class="outer">

<form action="" method="post">

爱好：<input type="checkbox" name="sex">男

<input type="checkbox" name="sex">女

</form>

</div>

</body>

2）单行文本垂直居中

<style>

div{

width: 200px;

height: 30px;

line-height: 30px;

border:1px solid grey;

}

</style>

<body>

<div >我只有一行</div>

</body>

即：行高=元素高度

3）多行文本垂直居中

<style>

div{

width: 200px;

text-align: center;

padding-top: 40px;

padding-bottom: 40px;

line-height: 30px;

border:1px solid grey;

}

</style>

<body>

<div >项脊轩，旧南阁子也。室仅方丈，可容一人居。百年老屋，尘泥渗漉，雨泽下注；每移案，顾视，无可置者。</div>

</body>

首先确定好行高、文本行数及容纳文本容器的实际占用高度（一般不会改变），然后根据这三个数据计算容器的上下padding：

padding-top=padding-bottom=(height – line_height * rows )/ 2

        说明;height为容器实际占用高度；line_height为行高，rows为行数。

二、非标准文档流

元素通过浮动或定位脱离标准文档流后，就不再区分块元素和行内元素，可以直接设置宽高了。下面针对不同的脱标情况来分别说明元素居中处理。

浮动

一般是一组元素一起浮动，针对这组元素，需要包在一个div里，然后对div进行居中即可：

<style>

.outer{

height:200px;

width:200px;

border:1px solid grey;

}

.inner{

width: 120px;

height:50px;

margin: auto auto;

margin-top: 75px;

overflow: hidden;/*清除浮动*/

}

.inner a{

width: 50px;/*直接设置宽和高*/

height: 30px;

text-decoration: none;

color: white;

background-color: green;

border-radius: 5px;

text-align: center;

line-height: 30px;

}

.inner a.float-left{

float:left;

}

.inner a.float-right{

float: right;

}

</style>

<body>

<div class="outer">

<div class="inner">

<a href="#" class="float-left">确定</a>

<a href="#" class="float-right">取消</a>

</div>

</div>

</body>

为了使a元素能够左右紧贴父元素，这里分别使用左、右浮动，然后对它们的父div作居中就是标准文档流中的方法了。最后记得清除浮动。

绝对定位

绝对定位的元素以父辈中定位过的、离得最近的元素为参考点，参考点可以是相对定位，或绝对定位或固定定位。元素居中：

<style>

div{

border:1px solid grey;

}

.outer{

position: relative;    /*父元素通过定位，成为后代元素的参考点*/

height:200px;

width:200px;

}

.inner{

position: absolute;

width: 120px;

height:50px;/*必须指定宽高*/

left:50%;

top:50%;

margin-left: -60px;

margin-top: -25px;

}

</style>

<body>

<div class="outer">

outer

<div class="inner">

inner

</div>

</div>

</body>

居中公式：

水平：left:50%;margin-left:-w/2

垂直：top:50%;margin-top:-h/2

    说明：w为需要居中元素的宽度；h为需要居中元素的高度

固定定位

固定定位的元素没有父元素之说了，一切以浏览器窗口为参考点，无论页面如何滚动，元素显示的位置不会改变。居中公式和绝对定位一样：

<style>

div{

position: fixed;

width: 100px;

height: 100px;

top:50%;

margin-top: -50px;

left:50%;

margin-left: -50px;

border:1px solid grey;

}

</style>

<body>

<div ></div>

</body>

以上样式不保证兼容所有浏览器，本人是做后台的，对前端兼容性要求不高……（完）

html常见盒子居中小结相关推荐

  1. 布局中常见的居中问题

    说到布局除了浮动以及定位外还有一个不得不提的点,那就是居中,居中问题我们在网页布局当中经常遇到,那么以下就是分为两部分来讲,一部分是传统的居中,另一种则是flex居中,每个部分又通过分为水平垂直居中来 ...

  2. html盒子居中的方式,CSS盒子居中三种方法

    前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法 常规方法只需要给盒子设置 ...

  3. html盒子页面居中,网页布局盒子(box)相关属性和盒子居中

    网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...

  4. z-index 绝对定位的盒子居中

    在使用定位布局时,可能会出现盒子重叠的情况.此时,可以使用 z-index 来控制盒子的前后次序 (z轴) 语法: 选择器 { z-index: 1; } z-index 的特性如下: 属性值:正整数 ...

  5. intouch负值显示0_17、定位的盒子居中显示

    盒子居中显示 margin: 0 auto; 只能让标准流的盒子居中对齐,脱标的盒子无法居中: 定位的盒子居中:先向右走父级盒子的一半50%,然后再向左走子盒子的一半(margin-left:负值): ...

  6. css3弹性盒子居中总结1

    弹性盒子横轴居中例子: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

  7. 父盒子内子盒子居中的方法

    1.采用子绝父相的方法 使用margin使盒子居中 2.子绝父相+css3中新增的transform移动 特点是可以不用写单位 写50%即可 3. 2.子绝父相   使子元素上下左右 移动为0  ma ...

  8. 英语写作中常见的“转折”小结

    英语写作中常见的"转折"小结 (1)一般意义上的"转折":but, yet, however,nevertheless(nonetheless), though ...

  9. html5这么盒子页面居中,实现盒子居中

    一.标准流下的盒子水平居中 只对块级元素起作用 margin: 0auto ; 二.绝对定位的盒子水平.竖直居中 1.通过具体的计算,让盒子居中 position : absolute ; /* 移动 ...

最新文章

  1. BZOJ 3534 重建
  2. 什么Linux服务器最适合你?
  3. Python中文件的介绍以及操作
  4. 虚拟化技术--服务器虚拟化
  5. c语言宏定义比较三个数大小,C语言中两个宏进行大小对比，其中一个没有定义，这种行为如何定义。...
  6. [转载] python strptime函数转时间数组_python—时间与时间戳之间的转换
  7. 从后台获取的数据渲染到页面中的dom操作
  8. 增长量计算n+1原则_资料分析听课笔记
  9. 区块链学习笔记12——BTC思考
  10. aspcms cookies欺骗和后台无验证注入
  11. RabbitMQ Management HTTP API的简单封装
  12. 利用原生JavaScript--实现小球无限转圈
  13. 移动互联网实战--移动端音频和图形优化处理
  14. flashback全库和pdb
  15. 热修复——深入浅出原理与实现
  16. 行业分析-全球与中国Wi-Fi6和Wi-Fi6E芯片组市场现状及未来发展趋势
  17. genl_ops结构分析
  18. Android入门第50天-读写本地文件
  19. java null什么意思_浅谈java中null是什么,以及使用中要注意的事项
  20. 便携式液晶驱动板卡方案可支持1080P能驱动 HBR 4LANE EDP 接口的液晶面板有一个 miniHDMI 接口,两个 Type-C 信号接口。支持 HDR 高动态。

热门文章

  1. java事务是基于数据库的么_详解在Spring Boot中使用数据库事务
  2. 【软件测试】一个真正的测试面试过程，我比面试官还狡猾......
  3. Java游戏项目之王者荣耀
  4. 国际金融试题库【1】
  5. 使用代理IP进行网络推广
  6. ECSHOP开源系统的文件结构
  7. EtherCAT总线运动控制器应用进阶一
  8. ExpandableTextView——一个可折叠的Textview
  9. 抖音网红是如何推广产品的？
  10. “校园安全+教务管理+家校互动+教育大数据”创造安全的家校生态环境