css3水平垂直居中

.parent {
    width: 200px;
    height: 200px;
    background-color: black;
}
.child {
    position: relative;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background-color:red;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

时间: 2024-11-03 21:20:55

css3水平垂直居中的相关文章

css3水平垂直居中(不知道宽高同样适用)

css水平垂直居中 第一种方法: 在父div里加: display: table-cell; vertical-align: middle; text-align: center; 内部div设置 display: inline-block; 例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

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"> &

CSS3之flexbox如何实现水平垂直居中和三列等高布局

最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西. 第一个css属性就没有看懂.于是乎,开始各种找资料,各种看书.这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍. 以下的内容会分为如下小节: 1.关于css3中flexbox需要掌握的概念 2.flexbox实现水平垂直居中对齐 3.三列等高自适应,页脚区域黏附底部的布局 1.关于css3中flexbox需要掌握的知识 因为对于三列等高

css3实现元素水平垂直居中

css3实现元素水平垂直居中,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http

CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中.前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水平垂直居中的方案. 这次在iPhone项目中实现弹出窗口水平垂直居中,总不是很理想,后来采用了一种纯CSS3的实box方法实现水平垂直居中,现将实现的代码片段贴出与大家分享: HTML Markup <div class="center"> <img src="

水平垂直居中div(css3)

一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min

网页元素居中攻略记_(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;} .

CSS3 不定宽高水平垂直居中

display: flex; justify-content: center; // 子元素水平居中 align-items: center; // 子元素垂直居中 [在父元素上添加上面3句,即可实现子元素水平垂直居中] 原文地址:https://www.cnblogs.com/queende7/p/8666544.html

css3不固定宽高水平垂直居中

display:-webkit-flex; //这个一定要 justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中了. 原文地址:https://www.cnblogs.com/xi-li/p/10972276.html