元素居中显示

1.水平居中

.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

2.垂直水平居中

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

3.jquery实现水平垂直居中

$(window).resize(function(){

    $(‘.className‘).css({
        position:‘absolute‘,
        left: ($(window).width() - $(‘.className‘).outerWidth())/2,
        top: ($(window).height() - $(‘.className‘).outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();
时间: 2024-10-02 02:38:52

元素居中显示的相关文章

CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

HTML元素居中显示

margin <div style="margin:300px auto,background-color:red,width:100px,height:100px"></div> 左右相对于父级元素居中,上下距离需要计算 ps:当为margin设置一个参数时代表上下左右;两个上下\左右;三个上\左右\下. 上下两个相邻元素的margin会相互覆盖取最大值,左右不重合 <div style="margin:auto;background-colo

浅谈css中一个元素如何在其父元素居中显示

css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒几种常见的方式.不足之处请大家批评指正(所有的代码都是自己亲手敲过可用的) 1.水平居中(margin:0 auto;) 关于这个,大家应该是最不陌生的,不管是在培训班还是自己自学的话 .这个应该是老师讲的第一个方法了(水平方向上),但是其有一个前提,就是被包裹的元素不能有浮动的属性.否则的话这个属

html始终让元素居中显示,背景图铺满随便拖动不出界

首先,写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Content/Images/background.jpg); background-repeat: no-repeat; background-size: cover; } .login { height: 300px; width: 400px; border: 1px solid #f00; posi

元素居中显示的方法总结

水平居中: 1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)(比如文本元素或者a链接) ①可以使用text-align:center 固定宽度的块级元素 ①使用margin:0 auto实现水平居中 ②绝对定位,left:50%,margin-left:-1/2元素宽度 垂直居中: 1.elements的display属性为inline或者inline-*(inline-block,inli

css让元素居中显示

html file: <body><div class='parentelement'> <div class='childelement'> 想让子元素在父元素内水平.垂直居中 </div> </div> </body> css file: .parentelement{ width:200px; height:200px; background-color:red; position:relative; } .childeleme

元素自动居中显示

我们在写页面时经常会遇到让一个元素自动居中显示的需求,这个元素有可能是块级元素,有可能是行内元素,也可能是文字等等,而居中的需求有可能是水平居中,垂直居中或者两者同时居中. 据我目前了解,居中有四种方式:1. 利用table表格特性: 2. 使用table-cell属性以table方式渲染: 3. margin自动居中: 4. 使用absolute配合margin负值居中:以下逐个讲解: 1. 利用table表格特性 这 种方式可以让内容垂直居中(valign="middle")和水平

CSS元素居中

html中元素分为行内元素和块级元素.采用margin或者float来使元素居中,是比较常见的方法. margin:0 auto只能用于块级元素,不能使行内元素居中. 参考知乎上为什么「margin:auto」可以让块级元素水平居中?,margin:0 auto,是左右外边距自适应,水平方向的 auto,其计算值取决于可用空间(剩余空间).元素本身为块级元素,那么水平方向可用空间的距离为其包含盒的宽度(宽度=盒总宽度-(padding-left+padding-right+border-left

css中元素居中总结

很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元素竖直居中等等.现在分别对其进行总结下(这篇文章也在 imooc 里发表过手记,可是因为板式的原因不太容易读懂.): 1. 让元素水平居中,使用 text-align: center; <div class="text-center">水平居中</div> .tex