html中位div添加水平线,html中div使用CSS实现水平/垂直居中的多种方式

CSS中的居中，在工作中，会经常遇到。它可以分为水平居中和垂直居中，以下是几种实现居中的方式。

以下例子中，涉及到的CSS属性值。

.parent-frame {

width: 200px;

height: 200px;

border: 1px solid red;

}

.child-frame {

width: 100px;

height: 100px;

border: 1px dotted blue;

}

1: text-align:center，水平居中

块状元素，水平居中

子元素水平居中

块状元素，水平居中

2：margin: 0 auto，水平居中

水平居中。上下外边框距为0，左右外边距浏览器会自动计算平分

子元素水平居中

块状元素，水平居中

3：line-height值，垂直居中

垂直居中。line-height属性，设置行间的距离(行高)。不允许使用负值。

单行文本的元素才适用，多行元素中不适用这种方法。元素内容是单行，并且其高度是固定不变的，

line-height值=父height值

4：使用float属性，配合relative定位，实现水平居中

给父元素设置float，然后将父元素整体向右移动50%，再将子元素整体向左移动50%，来实现水平居中。

记得将父元素清除浮动。

虽然宽度不同weiqinl

但一样

水平居中了

使用float属性，记得清楚浮动

5：使用table布局，默认垂直居中

table默认垂直居中vertical-align:middle。如果还想要水平居中，那就是行内元素，添加属性text-align: center

table默认垂直居中[vertical-align: middle]

水平居中添加text-align:center

6: 仿table，display:table-cell。并使用vertical-align属性,实现垂直居中

该属性设置元素的垂直对齐方式。

定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格的对齐方式。

仿table: display:table-cell垂直居中vertical-align:middle

7: 使用absolute绝对定位，配合margin使用，实现水平垂直居中

相对应于relative的绝对定位absolute，需要定宽。同时，top/bottom应该相等，并且相加不超过定宽度。 right/left也应该相等，并且相加不超过定宽。

再配合margin： auto使用

利用绝对定位，配合margin:auto自动计算外边距。

定宽元素,需要确定的尺寸。relative是为了给子元素定位用。

8: 使用absolute绝对定位，配合margin的负值(negative margins)来实现水平垂直居中。

negative margins负边距，会使结构塌陷，利用这个特点来实现。

利用绝对定位，配合margin的负值来实现居中。

负边距来实现，水平垂直居中。需要知道该元素的具体大小

9: 使用absolute绝对定位，配合translate 移动转换，实现水平垂直居中

使用百分比来绝对定位一个元素，并配合使用translate，将元素移动定位居中。

利用绝对定位，配合translate移动到水平垂直居中。

不需知具体大小。支持IE9+及现代浏览器

10：使用flex布局,设置其属性justify-content，align-items都为center，实现水平垂直居中

父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中

justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。

使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。两个属性都居中，则水平、垂直居中对齐

11: 利用flex布局，配合margin：auto使用，实现水平垂直居中。

父元素使用flex布局，子元素使用margin: auto

父元素使用flex布局，子元素配合margin:auto使用

[完]

打开App，阅读手记

html中位div添加水平线,html中div使用CSS实现水平/垂直居中的多种方式相关推荐

css 垂直居中_html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. 以下例子中,涉及到的CSS属性值. .parent-frame { width: 200px; heig ...
在html中div水平垂直css,html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码配合在线预览,效果更佳以下例子中,涉及到的CSS属性值. .parent-frame ...
python list的extend （会将被插入的列表的每个元素从列表中拿出添加到列表中）与append方法（若被插入为列表，会将列表插入到源列表中）区别
python list的extend (会将被插入的列表的每个元素从列表中拿出添加到列表中)与append方法(若被插入为列表,会将列表插入到源列表中)区别 Python--list的extend() ...
CAD将未显示在工具栏中的功能添加到工具栏中——以QLEADER为例
问题描述 CAD将未显示在工具栏中的功能添加到工具栏中--以QLEADER为例问题解决这时我们可以选择视图→工具栏. 在下拉框中选择标注将其拖动至标注工具栏最后点击确定即可.
mysql中给用户添加密码_MySql中添加用户,新建数据库,用户授权,删除用户,修改密码...
MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束): 1.新建用户登录MYSQL: @>mysql -u root -p @>密码 ...
安卓beforetextchanged_【已解决】Android中给EditText添加的TextWatcher中的onTextChanged始终被调用(被执行多次)...
[问题] Android中,给一个EditText添加了TextWatcher,其中实现了onTextChanged, 但是出现个问题: 对于EditText,只修改了一次(比如用删除键删除一个字符) ...
linux中的怎么添加组,linux中添加用户添加组
引导流程第四步: 加电自检---自举程序---加载内核(驱动.init)-- 验证用户 Login:root------------------/etc/passwd #ls –l /etc/p ...
纯css实现DIV以及图片水平垂直居中兼容多种浏览器（实现过程）
IE下一.无法实现IE下垂直居中可能出现的情况1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
PyQt5中为窗口添加菜单工具栏状态栏
PyQt5中为窗口添加菜单 QtDesigner中添加菜单移除菜单栏添加菜单栏代码中添加菜单 QtDesigner中添加工具栏代码中添加工具栏 QtDesigner中添加状态栏代码中添加状态 ...

html中位div添加水平线,html中div使用CSS实现水平/垂直居中的多种方式

html中位div添加水平线,html中div使用CSS实现水平/垂直居中的多种方式相关推荐

最新文章

热门文章