利用CSS使元素在水平方向或水平,竖直同时居中

水平居中
三种方法,参考:


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style>* {margin: 0;padding: 0;}div {// 一:width: 200px;height: 200px;background: blue;position: absolute;left: 50%;/*弊端:不利于编码,需要口算宽度的一半*//*margin-left: -100px;*/// 二:/*弊端:transform是新增属性,有的浏览器不支持,所以不利于兼容*/transform: translateX(-50%);//三:/*在css3中新增了一个cala()函数,可以实现简单的运算*//*弊端:css3新增的,有的不支持*//*margin-left: calc(-200px / 2);*//*margin-left: calc(-200px / 0.5);*/}</style>
</head>
<body><div></div></body>
</html>

效果:

水平,竖直方向居中,一种方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style>* {margin: 0;padding: 0;}.father {width: 300px;height: 300px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.father .son {width: 200px;height: 200px;background: blue;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
</body>
</html>

效果:

利用CSS使元素在水平方向或水平,竖直同时居中相关推荐

利用CSS伪元素写三角形
在做一些网页布局的时候,经常会遇到各种方向的三角形,常常令人头疼,今天给大家介绍一些利用CSS伪元素写各个方向三角形的方法目录一.CSS伪元素写三角形 1.向右的三角形 2.向上的三角形 3.向下 ...
利用CSS让元素垂直居中的两种实现方法
利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之 ...
Stata绘图：唯美的函数图-自定义水平附加线和竖直附加线
全文阅读:Stata绘图:唯美的函数图-自定义水平附加线和竖直附加线| 连享会主页 . 简介本文 dofiles 下载: 连享会 / 实证分析可视化 → -本文 dofiles- 绘制图形时 ...
利用css实现元素水平垂直居中的方法（分情况讨论）
首先需要说明,根据标准盒模型(这里暂且不关注低版本IE的盒模型),我们在css中设置的width指的是content-width,padding,margin,top,left这些属性为百分数时,计算 ...
html怎么设置一个div可以左右移动,利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
空格自动换行 html,利用CSS使文本、空白自动换行
前提:文本的父容器是块级元素.首先,我们来整理一下与换行有关的3个CSS属性: word-break 该属性决定文本内容超出容器时,浏览器是否自动插入换行符. 属性值:normal:默认换行规则--英 ...
在vue页面利用css伪元素：：after画样式
上面是UI给的原型图,其实做的是一个vue的嵌套表格上下级的关系,大家都看过element里面的树形组件,就是拿那个实现的,改的样式. 刚开始画出来是这样的,那个线突出去了,原型上是不突出的,最后研究 ...
如何利用css使PNG图片透明
或许这本来是一个很简单的问题,虽然偶主营业务不是CSS,也学习了一下,权做积累:如下代码来实现png的透明 <style type="text/css"> #yes { ...

利用CSS使元素在水平方向或水平,竖直同时居中

利用CSS使元素在水平方向或水平,竖直同时居中相关推荐

最新文章

热门文章