CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水平垂直居中的方案。

这次在iPhone项目中实现弹出窗口水平垂直居中,总不是很理想,后来采用了一种纯CSS3的实box方法实现水平垂直居中,现将实现的代码片段贴出与大家分享:

HTML Markup

  1. <div class="center">
  2. <img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" />
  3. </div>
  4. <div class="center">
  5. <div class="text">我就一行文字</div>
  6. </div>
  7. <div class="center">
  8. <div class="text">
  9. 我是多行文字<br />
  10. 我是多行文字
  11. </div>
  12. </div>

复制代码

CSS Code

  1. .center {
  2. width: 300px;
  3. height: 200px;
  4. padding: 10px;
  5. border: 1px solid #ccc;
  6. margin: 20px auto;
  7. display: -webkit-box;
  8. -webkit-box-orient: horizontal;
  9. -webkit-box-pack: center;
  10. -webkit-box-align: center;
  11. display: -moz-box;
  12. -moz-box-orient: horizontal;
  13. -moz-box-pack: center;
  14. -moz-box-align: center;
  15. display: -o-box;
  16. -o-box-orient: horizontal;
  17. -o-box-pack: center;
  18. -o-box-align: center;
  19. display: -ms-box;
  20. -ms-box-orient: horizontal;
  21. -ms-box-pack: center;
  22. -ms-box-align: center;
  23. display: box;
  24. box-orient: horizontal;
  25. box-pack: center;
  26. box-align: center;
  27. }
  28. .center img,
  29. .text {
  30. border: 1px solid #dedede;
  31. padding: 2px;
  32. }

复制代码

时间: 2024-10-14 04:47:25

CSS3实现水平垂直居中的相关文章

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

水平垂直居中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

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

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

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