transform:translate(-50%,-50%)实现水平垂直居中

translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。

当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置

translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。

与负margin-left和margin-top实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate()函数中的百分比是相对于自身宽高的百分比,所以能进行居中。

 1 .content {
 2     padding:10px;
 3     background:green;
 4     color:#fff;
 5     position:absolute;
 6     top:50%;
 7     left:50%;
 8     border-radius: 5px;
 9     -webkit-transform: translate(-50%,-50%);
10     -moz-transform: translate(-50%,-50%);
11     transform:translate(-50%,-50%);
12 }

原文地址:https://www.cnblogs.com/knuzy/p/9993181.html

时间: 2024-11-08 20:32:21

transform:translate(-50%,-50%)实现水平垂直居中的相关文章

总结div里面水平垂直居中的实现方法

最近经常碰到要垂直居中的问题,所以想着总结一下:关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent"> <div class="child"> </div> </div> 1.使用定位的方法 .parent { width: 300px; height: 200px; border: 1px

水平垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

CSS Transform让百分比宽高布局元素水平垂直居中

很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法.但如果这个元素的宽高是用百分比表示呢? 如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性.下面来看代码实例: HTML代码 <div class="

基于translate的水平垂直居中,适用于宽度已知,高度不固定的场景

水平垂直居中项目中会遇到的比较多,解决方案也有多种,今天刚学到一种 用translate来解决水平垂直居中的方案,说这个方案前先说一下之前我经常解决水平垂直居中的一个方案 <style> .box{position:fixed;top:50%;left:50%;width:100px;height:100px;margin-left:-50px;margin-top:-50%;background:red;} </style> <div class="box&quo

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

未知宽高的元素水平垂直居中方法总结

1.父元素设置display:table;子元素设置display:table-cell; 缺点:IE7不支持,而且子元素会填满父元素,不建议使用 2.使用css3 transform:translate(-50%; -50%) 缺点:兼容性不好,IE9+ 3.使用flex布局 缺点:兼容性不好,IE9+ 4.利用伪类元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

定位实现水平垂直居中的两种方法(无需计算)

首先给想要居中的元素设置绝对定位,其父元素设置相对定位. 然后,方法一:top,left,right,bottom都设置为0,margin:auto,即可在父元素中水平垂直居中. 方法二:top,left都设置为50%,然后transform:translate(-50%,-50%),如果其他地方也用到了transform并且设置transition容易误伤这里.

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度

css实现水平 垂直居中

css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平居中</title> <style> .box1{ border: 1px solid #000; text-align: center; } .box2{ display: inline-block; backgroun