Questions tagged [centering]

Centering is the act of placing something at the midpoint of a space.

Centering is the act of positioning something at the midpoint of a space. For two-dimensional spaces (lines), this usually involves taking the length of the line, dividing it by two, and placing the object at the point denoted by this value.

For higher dimensions, the same technique is also applied for each additional dimension, as each each dimension can be considered discrete.

In practical terms, centering is often applied to UI elements to give an interface consistency or symmetry and enhance its appearance. As it is used very commonly, most GUI APIs have some sort of centering functionality built in.

2135 questions
5037
votes
131 answers

How can I horizontally center an element?

How can I horizontally center a
within another
using CSS?
Foo foo
Lukas
  • 9,476
  • 4
  • 20
  • 14
1646
votes
49 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
Div to be aligned vertically
How can I…
Burak Erdem
  • 19,630
  • 7
  • 36
  • 56
1227
votes
34 answers

Center a column using Twitter Bootstrap

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? .centered { background-color: red; }
bsr
  • 57,282
  • 86
  • 216
  • 316
951
votes
31 answers

How to center a "position: absolute" element

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered? body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align:…
user1098278
  • 9,527
  • 3
  • 14
  • 3
621
votes
30 answers

Best way to center a

Best way to center a
element on a page both vertically and horizontally? I know that margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too?
J-Dog
591
votes
24 answers

Center a position:fixed element

I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed;,…
saturngod
  • 24,649
  • 17
  • 62
  • 87
541
votes
27 answers

How to center an element horizontally and vertically

I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex, the horizontal text-align disappears. How can I make both text alignments x and y for each of my tabs? * { box-sizing: border-box; } #leftFrame…
shuji
  • 7,369
  • 7
  • 34
  • 49
401
votes
9 answers

Centering in CSS Grid

I'm trying to create a simple page with CSS Grid. What I'm failing to do is center the text from the HTML to the respective grid cells. I've tried placing content in separate divs both inside and outside of the left_bg and right_bg selectors and…
beetroot
  • 4,129
  • 3
  • 12
  • 8
339
votes
12 answers

Keep the middle item centered when side items have different widths

Imagine the following layout, where the dots represent the space between the boxes: [Left box]......[Center box]......[Right box] When I remove the right box, I like the center box to still be in the center, like so: [Left box]......[Center…
Mark
  • 16,906
  • 20
  • 84
  • 117
285
votes
13 answers

How to center a button within a div?

I have a div that's width is 100%. I'd like to center a button within it, how might I do this?
Shai UI
  • 50,568
  • 73
  • 204
  • 309
265
votes
18 answers

Bootstrap Center Vertical and Horizontal Alignment

I have a page where only form exists and I want form to be placed in the center of the screen.
user348173
  • 8,818
  • 18
  • 66
  • 102
243
votes
9 answers

CSS horizontal centering of a fixed div?

#menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } I know this question is a million times out there, however I can't find a…
matt
  • 42,713
  • 103
  • 264
  • 397
161
votes
8 answers

How do I keep a label centered in WinForms?

In WinForms I am using a Label to display different messages like success, failure, etc. I'd like to center that label in the center form. I want a solution that will keep it centered whether there's just one word or a whole sentence in the label.
haansi
  • 5,470
  • 21
  • 63
  • 91
157
votes
9 answers

How to position a table at the center of div horizontally & vertically

We can set a image as background image of a
like: