让盒子实现水平和垂直居中（CSS3）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>让盒子实现水平和垂直居中</title><style>div {position: relative;width: 500px;height: 500px;background-color: skyblue;/*   1.我们translate里面的参数是可以用 % *//*  2.如果里面的参数是 % 移动的距离是 盒子自身的宽度或高度来对比 *//*  这里的50% 就是50px 因为盒子的宽度是100px  *//*   transform: translate(50%); */}p {/*  1.让盒子水平和垂直居中 *//* 子绝父相 */position: absolute;top: 50%;left: 50%;/*   2.再用margin进行设置   (盒子的一半即可实现水平垂直居中)*//*  margin-top: -100px; *//*  margin-left: -100px; */width: 200px;height: 200px;background-color: green;/* 3.也可以这样写 */transform: translate(-50%, -50%);}span {/*   transform对于行内元素是无效的 */transform: translate(300px, 300px);}</style>
</head><body><div><p></p></div><span>123</span>
</body></html>

如何让盒子实现水平和垂直居中相关推荐

让子盒子水平和垂直居中的五种方法
首先创建互相嵌套的两个盒子浏览器中打开,盒子的样式为: 接下来是让子盒子水平和垂直居中的五种方法: 方法一:利用文本水平居中text-align: center和行高line-height进行实现 ...
子盒子在父盒子中水平垂直居中
子盒子在父盒子中水平垂直居中的几种实现方式. 方式一:margin; HTML:  <div class="father"&g ...
CSS、JS 使DIV水平和垂直居中的各种方法
在Web开发中,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div. 在这里,我 ...
14种CSS实现水平或垂直居中的技巧
前言 css水平和垂直居中是一个亘古不变的话题,它常常出现在优美的网页上以及各大前端面试当中. 说来惭愧,在两年前面试的时候,我完全不知道如何做到水平和垂直均居中的方法,那场面别提有多尴尬了(ps:特 ...
个人笔记-css实现盒子模型水平居中和垂直居中
CSS实现盒子模型水平居中的方法 1.margin+width 适用于盒子的宽度是已知的 <div class="parent"><div class=" ...
CSS之布局（盒子的水平布局）
盒子的水平布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
css未知尺寸的图片的水平和垂直居中
纯CSS实现未知尺寸的图片水平和垂直居中.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vert ...
[css] 写出你知道的CSS水平和垂直居中的方法
[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中: <div class="outer"><di ...

如何让盒子实现水平和垂直居中

让盒子实现水平和垂直居中（CSS3）

如何让盒子实现水平和垂直居中相关推荐

最新文章

热门文章