CSS-水平居中、垂直居中、水平垂直居中
1、水平居中
水平居中可分为行内元素水平居中和块级元素水平居中
1.1 行内元素水平居中
这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:center即可实现。
.center{
text-align:center;
}
<div class="center">水平居中</div>
1.2 块级元素水平居中
定宽块级元素水平居中
只需给需要居中的块级元素加margin:0 auto即可,但这里需要注意的是,这里块状元素的宽度width值一定要有.center{
width:200px;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
不定宽块级元素水平居中
不定宽,即块级元素宽度不固定
方法1:设置table通过给要居中显示的元素,设置display:table,然后设置margin:0 auto来实现
.center{
display:table;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>方法2:设置inline-block(多个块状元素)
子元素设置inline-block,同时父元素设置text-align:center.center{
text-align:center;
}
.inlineblock-div{
display:inline-block;
}
<div class="center">
<div class="inlineblock-div">1</div>
<div class="inlineblock-div">2</div>
</div>方法3:设置flex布局
只需把要处理的块状元素的父元素设置display:flex,justify-content:center;.center{
display:flex;
justify-content:center;
}
<div class="center">
<div class="flex-div">1</div>
<div class="flex-div">2</div>
</div>
方法4:position + 负margin;
方法5:position + margin:auto;
方法6:position + transform;注:这里方法4、5、6同下面垂直居中一样的道理,只不过需要把top/bottom改为left/right,在垂直居中部分会详细讲述。
2、垂直居中
2.1 单行文本垂直居中
- 设置paddingtop=paddingbottom;或
- 设置line-height=height;
2.2 多行文本垂直居中
通过设置父元素table,子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部
2.3 块级元素垂直居中
方法1:flex布局
在需要垂直居中的父元素上,设置display:flex和align-items:center
要求:父元素必须显示设置height值
显示效果:
方法2:利用position和top和负margin(需知宽高)
1、设置元素为absolute/relative/fixed
2、margin=负一半
效果如下:
方法3:利用position和top/bottom和margin:auto(注意不是margin:0 auto)
1、position:absolute/relative/fixed
2、top/bottom:0
3、margin:auto
效果如下:
方法4:利用position和top和transform
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
效果如下:
注:
- 上述的块级垂直居中方法,稍加改动,即可成为块级水平居中方法,如top/bottom换成left/right
- transform方法,可用于未知元素大小的居中
3、水平垂直居中
方法1:绝对定位+margin:auto
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
方法2:绝对定位+负margin
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
方法3:绝对定位+transform
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
方法4:flex布局
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
方法5:table-cell实现居中
- 设置
display:table-cell;
text-align:center;
vertical-align: middle;
CSS-水平居中、垂直居中、水平垂直居中的更多相关文章
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- CSS实现元素水平垂直居中—喜欢对称美,这病没得治
[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- CSS(3)实现水平垂直居中效果
CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...
- CSS中图片水平垂直居中方法小结
写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...
- css:元素水平垂直居中的多种方式
CSS元素(文本.图片)水平垂直居中方法 1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...
随机推荐
- 领导力 / LeaderShip
领导力 / LeaderShip 什么是领导力? 结合我自己的经验,谈谈理解. 我们人类社会,发展到现在,已经成为了一个集合体,这一点在工业革命之前,表现的极为明显. 常见的社会发展形态,会按照人与人 ...
- F. Rhyme scheme
题: https://nanti.jisuanke.com/t/41414 #include<bits/stdc++.h> using namespace std; typedef __i ...
- QTP基本循环异常遍历(代码方式实现)
0 环境 系统环境:win7 1 前言 在正常循环的基础下 添加异常处理遍历 一些基本操作 请看正常循环 https://www.cnblogs.com/my-ordinary/p/11739180. ...
- Oracle 10G 服务端的安装
安装依赖包yum -y install binutils compat-libstdc++-33 compat-libstdc++-33.i686 elfutils-libelf elfutils-l ...
- make的使用和Makefile规则和编程及其基本命令(简单)
转自:http://blog.chinaunix.net/uid-23929712-id-2650328.html 概述: make从Makefile中文件中获取模块间的依赖关系,判断哪些文件 ...
- ZOJ-1183-Scheduling Lectures
可以用贪心求最小讲课次数,贪心策略也很好想,就是对于任意主题,能早讲就早讲.这种方案的讲课次数一定是最少的,但是不满意指标不一定是最小,然后再利用动态规划求在最少讲课次数前提下的最小不满意指标. 方法 ...
- POJ 3678 2-SAT
题意:有n个顶点里面可以放数字1或0,给m个限制,每个限制给出两个顶点编号和两编号内数字运算后的结果 思路:很直接的2-SAT,每个点分为1和0两种情况,按限制要求建边,跑tarjan然后判断点是否在 ...
- angular jspaf
import { Component, OnInit } from '@angular/core'; import * as jsPDF from 'jspdf'; import html2canva ...
- HashMap底层分析
以下基于 JDK1.7 分析. 如图所示,HashMap 底层是基于数组和链表实现的.其中有两个重要的参数: 容量 负载因子 容量的默认大小是 16,负载因子是 0.75,当 HashMap 的 si ...
- Memcached笔记——(一)安装&常规错误&监控
08年的时候接触过Memcached,当时还对它的客户端产品嗤之以鼻,毕竟手工代码没有各种ORM原生XML配置方便.尽管如此,Memcached现在已经成了服务器架构里不可或缺的一部分! 相关链接: ...