web开发常用的几种居中形式

brianway 发布于2019-08-29 13:23 / 3534人阅读

摘要：一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素有属性给元素添加代码演示此外，和产生同样效果的原因移步要居中的元素没有属性给添加属性，并在的外面包一层且添加是让块状里面的元素比如文字居中。

一水平居中
二水平垂直居中
三针对文本内容的垂直居中

一水平居中

要居中的元素A有width属性

给元素A添加 margin：0,auto；(代码演示)

ps: 此外，margin: auto;和margin:0 auto;产生同样效果的原因移步

要居中的元素B没有width属性

给B添加display:inline-block属性，并在B的外面包一层div且添加text-align:center;

ps：text-align:center是让块状里面的元素（比如文字）居中。

要居中的元素C 是绝对定位的也就是其position为absolute

给C添加margin: auto; top:0; left:0; right:0; bottom:0;以及width和height属性，并确保C的外层父元素position: relative;

ps:

设置top,left,bottom,right 属性把元素充满了容器，同时自身指定了宽度，总宽度（固定） = width（固定） + margin-left + margin-right;

当margin设置为auto的时候，左右边距会平分，元素自然就居中了(且是水平垂直居中)

二水平垂直居中： 要居中的元素C没有width属性及height属性

给C的外层父元素添加display: flex; align-items: center; justify-content: center; 属性(注意浏览器的兼容性)

给C添加margin: auto; 并且确保C的外层父元素 display: flex; (注意浏览器兼容性)

ps: flexBox的知识请移步阮一峰大神的博客

针对文本内容的垂直居中:

父元素有width和height属性以及text-align: center; 同时给要居中的元素D添加line-height为父元素的height值

ps: line-height 垂直居中原理请移步

all.

by 潘小闲

私有云混合云最基本的几种 html的几种轮播 js的几种数据类型 js缓存的几种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112572.html

web开发常用的几种居中形式

摘要：一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素有属性给元素添加代码演示此外，和产生同样效果的原因移步要居中的元素没有属性给添加属性，并在的外面包一层且添加是让块状里面的元素比如文字居中。一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素A有width属性给元素A添加 margin：0,auto；(代码演示) showImg(h...

zqhxuyuan 2019-08-21 16:23 评论0 收藏0
html的几种水平垂直居中的方式（基础）

摘要：前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。第一种方法 d第一种 .Centered1{ background-color: #800...

Songlcy 2019-08-30 15:44 评论0 收藏0
未知宽度水平居中的几种方法

摘要：在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。但即使我们没有设置的宽度直接设置的外边距就可以实现水平居中了这样我们就可以通过设置水平居中间接使里面的内容居中。转自未知宽度水平居中的几种方法在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法，并选了一个最合适的方法，现将...

raledong 2019-08-28 18:05 评论0 收藏0
未知宽度水平居中的几种方法

摘要：在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。但即使我们没有设置的宽度直接设置的外边距就可以实现水平居中了这样我们就可以通过设置水平居中间接使里面的内容居中。转自未知宽度水平居中的几种方法在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法，并选了一个最合适的方法，现将...

shenhualong 2019-08-01 14:46 评论0 收藏0
面试常见问题——垂直居中的几种方法

摘要：前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。（前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里）做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。结构我是垂直居中元素方法1：dispaly:table-cel...

Prasanta 2019-08-28 18:05 评论0 收藏0