CSS水平和垂直居中技巧大梳理

水平居中

行内元素的水平居中

text-align:center(在父元素中设置)

只对内联元素或行内块元素有效

需要放置于父元素中

块级元素的水平居中

margin: 0 auto;

只对块级元素有效

auto指的是自适应宽度。实质就是均分了元素左右的剩余空间,所以元素会居中。

auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了,所以是废话)

auto无法实现块级元素的垂直居中,原因与CSS默认的高度计算规则有关,这里暂不深究。但margin:auto可以实现绝对定位元素的水平垂直居中,见下文。

垂直居中

行内元素的垂直居中

line-height: 父元素的高度;(在父元素中设置)

只对内联元素或行内块元素有效

需要知道父元素的高度

需要放置于父元素中

适用于垂直方向上只有一个需要居中的元素的情况(想同时垂直居中多个元素时,可以用padding)

vertical-align: middle;(用于垂直对齐inline元素)

只对内联元素或行内块元素有效

主要用在文本和与文本相邻元素的垂直方向上的对齐问题(主要是对齐的作用,而不是居中的作用),

例如将一个icon与文字对齐。

使用vertical-align需要了解文字的baseline和line-box等知识

水平垂直居中

浮动元素

使用position:relative;

具体方法与绝对定位的第1个和第2个方法类似,只不过把absolute改为relative,并根据原float的方向稍作修改即可。

相对定位relative可以和float叠加,在float后的位置上再相对定位。

缺点就是float元素居中后仍会占据原来的位置。

第二种方式中,如果设定了浮动元素的高度,将会影响transform的具体值。

绝对定位元素

使用50%推进法则

position: absolute;
left: 50%;
top: 50%;

margin-left: -该元素自身宽度的一半px;      /*水平居中*/
margin-top: -该元素自身高度的一半px;      /*垂直居中*/

只对绝对定位的元素有效

需要知道绝对定位元素的宽高

兼容性很好,是一种主流用法

第一种方法的改进版,使用transform代替margin

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);  /*水平垂直居中*/

不需要知道绝对定位元素的宽高。(如果设置了高度,则有可能影响到transform的具体值)

兼容性一般,IE10+以及其他现代浏览器支持

使用margin:auto;

position: absolute;
left: 0;
right: 0;           /*水平居中*/
top: 0;
bottom: 0;          /*垂直居中*/
margin: auto;

只对绝对定位的元素有效

不必知道宽高,但需要是图片这种自身包含尺寸的元素

left与right必须配对出现,top与bottom必须配对出现

目前支持IE9+,及其他浏览器。

flex居中方式

display: flex;
justify-content: center;  /*水平居中*/
align-items: center;      /*垂直居中*/

块级元素设置display: flex;,内联元素设置display: inline-flex;。

需要注意的几个问题

元素浮动后仍可以设置margin属性,但auto不会起作用。

图片居中的问题

注意:如果图片的宽度大于父元素的宽度, 不能使用margin: 0 auto;或者text-align: center;让图片居中

如果图片的宽度大于父元素的宽度, 可以绝对定位中的居中方式让图片居中。但是定位流的弊端也比较明显。它必须知道图片宽度。

如果图片的宽度大于父元素的宽度, 也可以使用margin: 0 -100%;

注意: 父元素必须设置text-align: center;

原文地址:https://www.cnblogs.com/bjpowernodejava/p/10277328.html

时间: 2024-11-07 09:10:55

CSS水平和垂直居中技巧大梳理的相关文章

CSS水平和垂直居中的几种实现方法

一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题.可是这个方法有时候完全不起作用,而且对于布局是非常不科学的方法.正确的的设置写法如下(对页面构造没有影响):div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果.有时候我们还可以简写为 div { marg

css 水平、垂直居中

水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.li等块级元素),通过在要居中元素设置 margin:0 auto(上.右.下.左),这里表示上下0 左右自适应,达到元素水平居中. 垂直居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置display: table-cell;vertical-align: middl

CSS布局奇淫技巧之--各种居中

居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明外,都是兼容IE6+.谷歌.火狐等主流浏览器的. 先来说几种简单的.人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效. 2.使用 text-ali

让DIV中的内容水平和垂直居中

让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1.让层水平居中 1 2 3 4 5 .cla

基于jQuery实现的水平和垂直居中的div窗口

在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现. 1.通过css实现水平居中: 复制代码 代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2.通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸: 复制代码 代码如下: .cla

让DIV水平和垂直居中的几种方法

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 .mydiv{ 2 m

如何让DIV相对于body水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. .mydiv{      

让div等块级元素水平以及垂直居中的解决办法

一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中. 二.解决办法 1.CSS让div等块级元素水平居中 原理:让一个div等块级元素水平居中,直接用CSS就可以做到.只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得d

CSS布局奇淫技巧之--各种居中<转>

居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明外,都是兼容IE6+.谷歌.火狐等主流浏览器的. 先来说几种简单的.人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效. 2.使用 text-ali