javascript - How to centre the content within a div without using margin property - Stack Overflow

admin管理员组

文章数量:1400652

I have a container within which i will get contents dynamically. i want all ing contents/div to be centred automatically. i dont want to use margin property.

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

I have a container within which i will get contents dynamically. i want all ing contents/div to be centred automatically. i dont want to use margin property.

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

• javascript
• jquery
• css

Share Improve this question Follow edited May 9, 2016 at 6:04 ascx 47322 silver badges1313 bronze badges asked May 9, 2016 at 5:50 TerribleDeveloperTerribleDeveloper 58322 gold badges99 silver badges2121 bronze badges 5

• .linContainer { text-align: center; } – Jay Commented May 9, 2016 at 5:53
• Thanks jahangir. i want vertically centred too – TerribleDeveloper Commented May 9, 2016 at 5:54
• Sometimes using just padding-top with percentage can work. Depends how accurate you want the vertical center to be, or if you want to drop support for old browsers. If you want to drop support, then use CSS3 vertical centering. – ascx Commented May 9, 2016 at 5:55
• 1 Why not use margin property? – Jose Quintero Commented May 9, 2016 at 5:56
• because contents are multiples. i don't want to separate them from each other. thats why no margin. – TerribleDeveloper Commented May 9, 2016 at 5:59

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3

To center vertically AND horizontally, you can change the default display from block to table-cell.

Fiddle

You can do this:

.linContainer {
    text-align: center;
}

Note that everything will be centered (including text). Or do you want to center only divs?

try this code

.lincontainer {
display: flex;
justify-content: center;
}

.container {
    width: 100%;
    height: 120px;
    background: #ccc;
    text-align : center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="container">
    <div class="centered-content">
        Center this!
   </div>
</div>

Not sure if text-align:center will serve the purpose.

 .linContainer{
  width:150px;
  height:auto;
  text-align:center;
  border:1px solid red;
  max-height:200px;
}

You can check this jsfiddle

You can use the following position: absolute idiom:

.linContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

[class^='content'] {
  height: 50px;
  width: 50px;
  background: cyan;
  border: 1px solid black;
}

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

Or you can use flexbox - display: flex:

.linContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

[class^='content'] {
  height: 50px;
  width: 50px;
  background: cyan;
  border: 1px solid black;
}

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

Good references on centering with CSS:

• W3C - CSS: centering things
• CSS-tricks - Centering in CSS

The best way to achieve this is to use css flex.

Note: margin has just been used to define space between content blocks, not to center it.

.flex-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	flex-flow: row wrap;
	align-content: flex-end;
}

  .linContainer{
   background:#aeaeae;
   }

.content1, .content2, .content3, .content4{
  background:lawngreen;
  padding:20px;
  margin:10px;
  
  }

<div class="linContainer flex-container">

   <div class="content1"></div>
   <div class="content2"></div>
   <div class="content3"></div>
   <div class="content4"></div>

</div>

<div class="align">
     Test
</div>


div.align {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 200px;
    background-color:#ff6a00;
}

本文标签： javascriptHow to centre the content within a div without using margin propertyStack Overflow