CSS子元素居中(父元素宽高已知，子元素未知)

<style>
.container{width:400px; height:400px; position:relative;}
.center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto;
         width:50px; height:50px;  //宽高可以不写
}
</style>
<div class="container">
  <div class="center"></center>
</div>

父元素高度已知，子元素宽高未知，水平垂直居中很好用

时间： 2024-08-06 15:59:28

CSS子元素居中(父元素宽高已知，子元素未知)的相关文章

IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box{ 8 width: 308px; 9 height: 308px; 10 background-color: red; 11 position: absolute; 12 } 13 .content{ 14 wid

css 宽高自适应的div 元素如何居中垂直居中

在我们编写css 样式的时候经常会遇见一个问题那就是一个宽高未知的元素要让他垂直居中如何实现这个呢下面是我常用的两种方法上代码下面的是结构代码 <div class="wrap">//此处为父组件我们会设置父级的宽高并让其居中 <div class="center">//子组件我们要实现它的垂直居中不设置他的宽高宽高都由下面的img引入的图片撑开 <img width="100px" src

css浮动元素居中，右边宽固定而左边宽自适应

1.浮动元素居中固定宽高的情况下: width:200px;height: 200px;position: absolute;left:50%;top:50%;margin-left: -100px;margin-top: -100px; 未知宽高的情况下: width:200px;height: 200px;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%); 2.右边宽固定,左边宽自适应html: <div

获取页面、元素、窗口和返回页面、元素、窗口的宽高

jquery如何获取元素的滚动高度获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 :$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 :$(document).width(); 浏览器当前窗口文档body的高度: $(document.body).height();浏览器当前窗口文档body的宽度: $(document.body).width();获

(前端)html与css，css 8、盒模型、宽高、盒模型内减

盒模型概述盒模型:也叫框模型一个盒子内容包含了五部分:宽度.高度.内边距.边框.外边距. 代码↓ <!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"

CSS之各种居中

本博客讨论居中情况设定为总宽度不定,内容宽度不定的情况.(改变大小时,仍然居中). 特别说明:在元素设置 position:absolute; 来设置居中效果时,除去博客下介绍的css3方法外,还可以使用负的 margin 来居中,这样解决了兼容性的问题,但是只适用于宽高已知的情况(因为负的偏移量为元素宽高的一半).宽高改变时,不再是居中效果. 在这些布局中的子元素,因为其属性设置,都默认为内容宽度. 本博客所有居中的例子,只讨论css的实现,html代码统一如下: <div class=&qu

图片 + 未知宽高 + 垂直居中

图片 + 未知宽高 + 垂直居中第一种: table-cell / inline-block + vertical-align条件: 容器宽高受图片默认宽高影响html结构: <div> <img src="./image.jpg" > </div> css代码: div { display: inline-block; /*display: table-cell;*/ padding: 10px; border: 2px solid #aaa;

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float

css中元素居中的几种方法

对于在网页端布局,垂直居中难于水平居中,同时实现水平和垂直居中是最难的.在移动端,因为设备的宽高是可变的,故一些方案很难实现.以下使用几种方案对下面的html去实现居中,如有不足,可以提出宝贵的意见: <div class="center"> <img src="1.jpg" alt> </div> 1. 使用text-align水平居中这种方案只能使水平居中,要想垂直居中的话,要给div添加padding或给内容添加margi