美文网首页
CSS元素居中

CSS元素居中

作者: 庄海鑫 | 来源:发表于2017-08-21 00:48 被阅读0次
margin:auto
效果图 出现水平滚动条

代码http://js.jirengu.com/cazop/1/edit?html,css,output
特点 :当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。


2.margin:0 auto,max-width

max-width
效果图 没有出现滚动条

代码http://js.jirengu.com/cade/1/edit?html,css,output
特点:针对上一条的改进,在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,调整下浏览器窗口大小检查下吧!


3.margin: 0 auto,width:n%

效果图

不会出现滚动条

代码http://js.jirengu.com/renal/1/edit?html,css,output
特点:宽度自适应,没有滚动条


垂直居中


设上下padding撑起高度居中

效果图

image.png
代码http://js.jirengu.com/majaf/2/edit
特点:高度由内容撑开

文字居中

效果图

image.png
代码http://js.jirengu.com/davox/2/edit

绝对定位居中

效果图

image.png 图片居中

代码http://js.jirengu.com/cezeb/1/edit?html,css,output
http://js.jirengu.com/vohe/1/edit?html,css,output


vertical-align实现居中

效果图

图片居中

代码http://js.jirengu.com/sivid/1/edit


table-cell实现居中

效果图

image.png
代码http://js.jirengu.com/zadoz/1/edit

相关文章

  • 垂直居中的方法

    行内元素居中 html css before元素居中 html css table-cell居中 css 垂直居中...

  • 垂直居中,水平居中

    CSS设置行内元素的水平居中 CSS设置行内元素的垂直居中 CSS设置块级元素的水平居中 CSS设置块级元素的垂直居中

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

  • CSS - 垂直水平居中方法

    前言 总括:整理 css 垂直水平居中方法,区分内联元素与块级元素 CSS垂直居中和水平居中 用css让一个容器水...

  • CSS之居中问题

    CSS居中主要分为两类 水平居中 (水平居中分为行内元素居中和块状元素居中 块状元素居中又分为 定宽元素 和 不...

  • 2020-03-05 CSS水平垂直居中学

    1.块级元素水平居中,水平元素垂直居中 CodePen:CSS块级水平居中 2.块级元素垂直居中 CodePen:...

  • 居中问题

    css图片居中 1 tanslate居中 2 text-align属性水平居中 3 绝对定位元素居中 4 css3...

  • css 图片居中

    css图片居中(水平居中和垂直居中) css图片水平居中 块状元素直接用text-align:center, di...

  • CSS居中各种情况的解决情况

    CSS居中的几种情况 这里参考How to center anything with css 1. 元素水平居中 ...

  • css居中大全

    css居中大全 Horizontally 水平居中 内联元素 块级元素 多个块级元素 Vertically 垂直...

网友评论

      本文标题:CSS元素居中

      本文链接:https://www.haomeiwen.com/subject/lcdirxtx.html