基于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"></div>

上面的这种方案必须是在宽高都明确的情况下,才可以水平垂直居中,

而如果现在只知道宽,高不固定,需要根据元素内部内容的多少而高度进行变化的情况下,又想水平垂直居中,那么可以使用translate来解决

<style>
.box{position:fixed;top:50%;left:50%;width:100px;transform:translate(-50%,-50%);background:green;}
</style>
<div>translate </div>

translate 移动元素的方式可以总结归纳为三种:水平移动,上下垂直移动,对角移动

水平移动 向右移动 translate(x,0); 向左移动 translate(-x,0)

上下移动 向上移动 translate(0,-y); 向下移动 translate (0,y);

对角移动 向右下角移动 translate(x,y) 向 右上角移动 translate(x,-y); 向左下角移动  translate(-x,y) 向左上角移动 translate(-x,-y)

时间: 2024-10-08 16:38:19

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

CSS总结(六)——元素的垂直居中(已知高度/未知高度)

元素的垂直居中 1.已知高度宽度元素的水平垂直居中 ①  绝对定位居中 .center{ margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; } ②  绝对定位与负边距实现 .center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; } 2.未知高度宽度元素的水平垂直居中 ①  当元

【前端攻略】最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加容易了.搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法. 由简至繁: 行内元素的水平居中     要实现行内元素(<span>.<a>等)的水平居中,只需把行内元素包裹在块级父层元素(<div>.<l

水平垂直居中方案

http://www.cnblogs.com/coco1s/p/4444383.html 最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加容易了.搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法. 由简至繁: 行内元素的水平居中     要实现行内元素(<span>.<a&

跬步-CSS实现水平垂直居中

CSS实现居中,无论在实际开发和面试都是常见的内容. 本文总结了实现居中常见的几种方式,包含宽度已知/未知及兼容性的要求. <style> .pn { width: 500px; height: 500px; border: 1px solid #000; } .box { background-color: #eee; } .size { width: 100px; height: 100px; } </style> <body> <div class=&quo

网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中

flex实现子块的完美居中 方案 父块使用display:flex属性,子块margin自适应即可实现 代码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>块状元素垂直居中(已知高度)</title> <style> *{margin: 0;padding: 0;} .

Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半

问题描述: 如何使按钮水平垂直居中且始终占据屏幕宽度一半 效果如下: 竖屏: 横屏: 解决方案: 使用线性布局,指定线性布局的总权重(weightSum)为1, 指定按钮的权重为其一半即0.5 布局代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

网页元素居中攻略记_(3)已知宽高元素水平垂直居中

已知宽高元素水平垂直居中 方案 使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中 代码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>已知宽高元素水平垂直居中</title> <style> #container { posit

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

translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.. 当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置 translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置. 与负margin-left和margin-top实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate()函数中

CSS水平垂直居中方法总结

部分HTML代码如下: <div class="wrap block"> <div class="block-center">块儿居中</div> </div> <div class="wrap inline"> <span class="inline-center">内联居中</span> </div> 一.absolute 拔河